คำถามติดแท็ก vuejs2

ใช้แท็กนี้สำหรับคำถามเฉพาะสำหรับ Vue.js เวอร์ชัน 2 ซึ่งเป็นโอเพนซอร์สเฟรมเวิร์ก Javascript แบบโปรเกรสซีฟสำหรับการสร้างอินเทอร์เฟซผู้ใช้

5
วิธีเรียกใช้ฟังก์ชัน vue.js ในการโหลดหน้า
ฉันมีฟังก์ชันที่ช่วยกรองข้อมูล ฉันกำลังใช้v-on:changeเมื่อผู้ใช้เปลี่ยนการเลือก แต่ฉันยังต้องการฟังก์ชันที่จะเรียกใช้ก่อนที่ผู้ใช้จะเลือกข้อมูล ฉันได้ทำเช่นเดียวกันกับการAngularJSใช้งานก่อนหน้านี้ng-initแต่ฉันเข้าใจว่าไม่มีคำสั่งดังกล่าวในvue.js นี่คือหน้าที่ของฉัน: getUnits: function () { var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status}; this.$http.post('/admin/units', input).then(function (response) { console.log(response.data); this.units = response.data; }, function (response) { console.log(response) }); } ในbladeไฟล์ฉันใช้แบบฟอร์มใบมีดเพื่อดำเนินการตัวกรอง: <div class="large-2 columns"> {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!} </div> …

8
วิธีลบรายการออกจากอาร์เรย์ใน Vue.js
ฉันเพิ่งเริ่มใช้ vue.js (2) และฉันกำลังทำงานกับแอปเหตุการณ์ง่ายๆ ฉันสามารถเพิ่มกิจกรรมได้แล้ว แต่ตอนนี้ฉันต้องการลบกิจกรรมโดยอาศัยการคลิกปุ่ม HTML <div class="list-group"> <div class="list-group-item" v-for="event in events"> <h4 class="list-group-item-heading"> {{ event.name }} </h4> <h5> {{ event.date }} </h5> <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p> <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button> </div> </div> </div> JS (Vue) new Vue ({ el: '#app', data: { events: [ { …

12
[คำเตือน Vue]: คุณสมบัติหรือวิธีการไม่ได้กำหนดไว้ในอินสแตนซ์ แต่อ้างอิงระหว่างการแสดงผล
var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) …

11
เรามี router.reload ใน vue-router หรือไม่?
ฉันเห็นในคำขอดึงนี้: เพิ่ม router.reload() โหลดซ้ำด้วยเส้นทางปัจจุบันและเรียก data hook อีกครั้ง แต่เมื่อฉันลองออกคำสั่งต่อไปนี้จากส่วนประกอบ Vue: this.$router.reload() ฉันได้รับข้อผิดพลาดนี้: Uncaught TypeError: this.$router.reload is not a function ฉันค้นหาในเอกสารแต่ไม่พบสิ่งที่เกี่ยวข้อง vue / vue-router ให้บริการบางอย่างเช่นนี้หรือไม่? เวอร์ชันซอฟต์แวร์ที่ฉันสนใจ ได้แก่ : "vue": "^2.1.0", "vue-router": "^2.0.3", ปล. ฉันรู้ว่าlocation.reload()เป็นทางเลือกหนึ่ง แต่ฉันกำลังมองหาตัวเลือก Vue ดั้งเดิม

4
Vuejs และ Vue.set () อัปเดตอาร์เรย์
ฉันยังใหม่กับ Vuejs ทำบางอย่าง แต่ฉันไม่รู้ว่ามันเป็นวิธีที่ง่าย / ถูกต้อง สิ่งที่ฉันต้องการ ฉันต้องการวันที่บางวันในอาร์เรย์และอัปเดตในเหตุการณ์ ก่อนอื่นฉันลองใช้ Vue.set แต่มันไม่ได้ผล หลังจากเปลี่ยนรายการอาร์เรย์ของฉันแล้ว: this.items[index] = val; this.items.push(); ฉันดัน () ไม่มีอะไรไปที่อาร์เรย์และมันจะอัปเดต .. แต่บางครั้งรายการสุดท้ายจะถูกซ่อนไว้อย่างใด ... ฉันคิดว่าโซลูชันนี้ค่อนข้างแฮ็คฉันจะทำให้เสถียรได้อย่างไร รหัสง่ายๆอยู่ที่นี่: new Vue({ el: '#app', data: { f: 'DD-MM-YYYY', items: [ "10-03-2017", "12-03-2017" ] }, methods: { cha: function(index, item, what, count) { console.log(item + " index …

3
ทำไมสัญญาในที่สุดโครงการ Vue ของฉันไม่ทำงานใน Edge
ฉันมีปัญหาอย่างมากในการทำให้ polyfills ทำงานใน Edge ฉันพยายามติดตามเอกสารด้วยความพยายามต่าง ๆ ทั้งหมดไม่ทำงาน ดูเหมือนจะเป็นสัญญาในที่สุดโดยเฉพาะที่ไม่ทำงาน สิ่งนี้เกิดขึ้นในโมดูล vuexดังนั้นฉันจึงลองเพิ่ม vuex ลงใน transpileDependencies ใน vue.config แต่ไม่มีโชค babel.config.js ของฉัน: module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; ใน main.js ของฉันฉันมีการนำเข้าสองรายการต่อไปนี้ในลำดับต้น ๆ : import 'core-js/stable'; import 'regenerator-runtime/runtime'; vue.config.js ของฉัน // eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); const isProd = process.env.NODE_ENV …

3
การพิมพ์องค์ประกอบด้วย VueJS โดยใช้ห้องสมุดบุคคลที่สาม
ฉันกำลังทำงานกับตาราง HTML และพิมพ์ตารางนั้นไปยังเครื่องพิมพ์ที่ใช้html-to-paperใน vue.js สิ่งที่ฉันกำลังทำอยู่คือการคลิกเพิ่มการสร้างแถวใหม่จากนั้นเมื่อคลิกการพิมพ์ฉันกำลังพยายามพิมพ์ตาราง แต่ไม่ได้ถ่าย ข้อมูลใด ๆ แสดงเซลล์ว่างเท่านั้น รหัสแอป <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> …

4
เปลี่ยนเส้นทางเมื่อเริ่มต้นด้วย URL เบราว์เซอร์ที่กำหนด
ฉันสร้างแอป Vue ใหม่ด้วยพา ธ พื้นฐาน เนื่องจากแอปถูกฝังลงในแอป Vue อื่นแอปนี้ไม่แสดงผลrouter-viewเมื่อเริ่มต้น หากคุณต้องการทราบเพิ่มเติมเกี่ยวกับวิธีการที่แอปนี้ฝังอยู่ในแอพอื่นหรือไม่โปรดดูที่นี่: เมานต์แอพ Vue ลงในคอนเทนเนอร์ของแอพ Vue หลัก และคำตอบของฉันกับปัญหานี้: https://stackoverflow.com/a/58265830/9945420 router-viewเมื่อเริ่มต้นใบสมัครของฉันมันทำให้ทุกอย่างยกเว้น ฉันต้องการเปลี่ยนเส้นทางเมื่อเริ่มต้นด้วย URL เบราว์เซอร์ที่กำหนด นี่คือการกำหนดค่าเราเตอร์ของฉัน: import Vue from 'vue'; import Router from 'vue-router'; import One from './views/One.vue'; import Two from './views/Two.vue'; Vue.use(Router); const router = new Router({ base: '/my-embedded-app/', mode: 'history', routes: [ { …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.