คำถามติดแท็ก vue.js

ฉันพยายามที่จะเข้าใจวิธีการดูความแปรปรวนของเสา ฉันมีองค์ประกอบหลัก (ไฟล์. vue) ที่รับข้อมูลจากการโทร ajax วางข้อมูลไว้ในวัตถุและใช้เพื่อแสดงองค์ประกอบย่อยของเด็กผ่านทางคำสั่ง v-for ภายใต้การทำให้ง่ายขึ้นของฉัน: <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... จากนั้นภายใน<script>แท็ก: data(){ return { players: {} }, created(){ let self = this; this.$http.get('../serv/config/player.php').then((response) => { let pls = response.body; for (let p in pls) { self.$set(self.players, …

413 javascript  vue.js  vue-component  vue-resource 

ฉันมีอินพุต: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> และในองค์ประกอบ Vue.js ของฉันฉันมี: .. .. ready() { this.form.name = this.store.name; this.form.validated = this.store.validated; }, .. validatedเป็นbooleanก็สามารถเป็นได้ทั้ง0หรือ1แต่ไม่ว่าสิ่งที่มีค่าจะถูกเก็บไว้ในฐานข้อมูลไม่มีการป้อนข้อมูลของฉันถูกปิดใช้งานเสมอ ฉันต้องการปิดใช้งานอินพุตหากfalseไม่เช่นนั้นควรเปิดใช้งานและแก้ไขได้ ปรับปรุง: การทำเช่นนี้จะเปิดใช้งานอินพุตเสมอ(ไม่ว่าฉันจะมี 0 หรือ 1 ในฐานข้อมูล): <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> การทำเช่นนี้จะปิดการใช้งานอินพุตเสมอ(ไม่ว่าฉันจะมี 0 หรือ 1 …

277 javascript  html  forms  vue.js 

ฉันเริ่มโครงการ vue.js ใหม่ดังนั้นฉันจึงใช้เครื่องมือ vue-cli เพื่อพิจารณาโครงการ webpack ใหม่ (เช่นvue init webpack) ขณะที่ฉันกำลังเดินผ่านไฟล์ที่สร้างขึ้นฉันสังเกตเห็นการนำเข้าต่อไปนี้ในsrc/router/index.jsไฟล์: import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) …

273 javascript  webpack  ecmascript-6  vue.js 

วิธีลบ hashbang #!จาก url ฉันพบตัวเลือกเพื่อปิดการใช้งาน hashbang ในเอกสารประกอบเราเตอร์ vue ( http://vuejs.github.io/vue-router/en/options.html ) แต่ตัวเลือกนี้จะลบ#!และใส่# มีวิธีใดที่จะมี URL ที่สะอาดหรือไม่? ตัวอย่าง: ไม่: #!/home แต่: /home

257 vue.js  vue-router 

ในเอกสาร VueJs 2.0ฉันไม่พบ hooks ที่จะฟังpropsการเปลี่ยนแปลง VueJs มีตะขอเช่นนั้นonPropsUpdated()หรือคล้ายกัน? ปรับปรุง ตามที่ @wostex แนะนำฉันได้ลองใช้watchทรัพย์สินของฉัน แต่ไม่มีอะไรเปลี่ยนแปลง จากนั้นฉันก็รู้ว่าฉันมีคดีพิเศษ: <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> ฉันกำลังส่งผ่านmyPropองค์ประกอบหลักที่ได้รับไปยังchildองค์ประกอบ จากนั้นwatch: {myProp: ...}ไม่ทำงาน

257 javascript  vue.js  vuejs2  vue-component 

ฉันจะดึงพารามิเตอร์การสืบค้นใน Vue.js ได้อย่างไร http://somesite.com?test=yayเช่น ไม่สามารถหาวิธีดึงข้อมูลหรือฉันจำเป็นต้องใช้ JS บริสุทธิ์หรือห้องสมุดบางอย่างสำหรับเรื่องนี้?

251 javascript  vue.js  vue-router  url-parameters 

แค่คำถามด่วน คุณสามารถบังคับVue.jsให้โหลดซ้ำ / คำนวณใหม่ทุกสิ่งได้หรือไม่ ถ้าเป็นเช่นนั้นได้อย่างไร

231 javascript  vue.js 

สมมติว่าฉันมีอินสแตนซ์ Vue หลักที่มีคอมโพเนนต์ลูก มีวิธีการเรียกใช้เมธอดที่เป็นของหนึ่งในคอมโพเนนต์เหล่านี้จากภายนอกอินสแตนซ์ Vue ทั้งหมดหรือไม่? นี่คือตัวอย่าง: var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my-component'].increaseCount(); // This doesn't work }); <script src="http://vuejs.org/js/vue.js"></script> …

229 javascript  vue.js 

ฉันกำลังเรียน Vue ด้วยหลักสูตรออนไลน์และผู้สอนให้ฉันออกกำลังกายเพื่อป้อนข้อความด้วยค่าเริ่มต้น ฉันทำมันเสร็จโดยใช้ v-model แต่ผู้สอนเลือก v-bind: value และฉันไม่เข้าใจว่าทำไม ใครสามารถให้คำอธิบายง่ายๆเกี่ยวกับความแตกต่างระหว่างสองสิ่งนี้กับเวลาที่ควรใช้แต่ละอันดีกว่า

208 javascript  mvvm  frameworks  vue.js  frontend 

เป็นไปได้ที่จะผ่านพารามิเตอร์ในคุณสมบัติที่คำนวณได้ใน Vue.Js ฉันสามารถเห็นเมื่อมี getters / setter โดยใช้การคำนวณพวกเขาสามารถใช้พารามิเตอร์และกำหนดให้กับตัวแปร ชอบที่นี่จากเอกสาร : // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } …

199 javascript  vue.js  vuejs2 

ฉันจะจัดการตีความ HTML ได้อย่างไรในการโยงหนวด ในขณะนี้ตัวแบ่ง ( <br />) จะแสดง / หลบหนี แอป Vue ขนาดเล็ก: var logapp = new Vue({ el: '#logapp', data: { title: 'Logs', logs: [ { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 }, { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: …

191 javascript  html  vue.js 

ฉันพยายามใช้คำสั่งคลิกเมื่อภายในองค์ประกอบ แต่ดูเหมือนจะไม่ทำงาน เมื่อฉันคลิกส่วนประกอบที่ไม่มีอะไรเกิดขึ้นเมื่อฉันควรได้รับ 'คลิกทดสอบ' ในคอนโซล ฉันไม่เห็นข้อผิดพลาดใด ๆ ในคอนโซลดังนั้นฉันไม่รู้ว่าฉันทำอะไรผิด index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> App.vue <template> <div id="app"> <test v-on:click="testFunction"></test> </div> </template> <script> import Test from './components/Test' export default { name: 'app', methods: { …

186 javascript  vue-component  vuejs2  vue.js 

ฉันเริ่มต้นhttps://laracasts.com/series/learning-vue-step-by-stepซีรี่ส์ ฉันหยุดบทเรียนVue, Laravel และ AJAXด้วยข้อผิดพลาดนี้: vue.js: 2574 [เตือนของ Vue]: หลีกเลี่ยงการกลายพันธุ์ prop โดยตรงเนื่องจากค่าจะถูกเขียนทับเมื่อใดก็ตามที่องค์ประกอบหลักแสดงผลอีกครั้ง ให้ใช้ข้อมูลหรือคุณสมบัติที่คำนวณได้แทนตามค่าของ prop Prop กำลังกลายพันธุ์: "รายการ" (พบในส่วนประกอบ) ฉันมีรหัสนี้ในmain.js Vue.component('task', { template: '#task-template', props: ['list'], created() { this.list = JSON.parse(this.list); } }); new Vue({ el: '.container' }) ฉันรู้ว่าปัญหานั้นสร้างขึ้น ()เมื่อฉันเขียนทับเสารายการ แต่ฉันเป็นมือใหม่ใน Vue ดังนั้นฉันจึงไม่รู้วิธีแก้ไขโดยสิ้นเชิง ใครมีความคิดวิธี (และโปรดอธิบายว่าทำไม) เพื่อแก้ไขหรือไม่

181 javascript  vue.js  vuejs2 

เอกสาร Vue.js อธิบายcreatedและmountedเหตุการณ์ดังต่อไปนี้: created เรียกว่าพร้อมกันหลังจากสร้างอินสแตนซ์ ในขั้นตอนนี้อินสแตนซ์ได้เสร็จสิ้นการประมวลผลตัวเลือกซึ่งหมายความว่ามีการตั้งค่าต่อไปนี้: การสังเกตข้อมูล, คุณสมบัติที่คำนวณได้, วิธีการ, การเรียกกลับ / ดูเหตุการณ์ อย่างไรก็ตามขั้นตอนการติดตั้งยังไม่เริ่มต้นและคุณสมบัติ $ el จะยังไม่พร้อมใช้งาน mounted เรียกว่าหลังจากอินสแตนซ์เพิ่งถูกเมาท์โดยที่ el ถูกแทนที่ด้วย vm. $ el ที่สร้างขึ้นใหม่ หากอินสแตนซ์รูทถูกเมาท์กับองค์ประกอบในเอกสาร vm. $ el ก็จะอยู่ในเอกสารเมื่อถูกเมาท์ถูกเรียก hook นี้ไม่ถูกเรียกระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ฉันเข้าใจทฤษฎี แต่ฉันมีคำถาม 2 ข้อเกี่ยวกับการปฏิบัติ: มีกรณีใดบ้างที่createdจะถูกนำไปใช้mounted? ฉันสามารถใช้createdเหตุการณ์สำหรับในสถานการณ์จริง (รหัสจริง) ได้อย่างไร

181 javascript  vue.js 

ความแตกต่างที่สำคัญระหว่างวิธีการและค่าที่คำนวณใน Vue.js คืออะไร? พวกเขามีลักษณะเหมือนกันและใช้แทนกันได้

178 javascript  methods  vue.js  vuejs2  computed-properties