การเขียนโปรแกรม vue.js

13

ใน Vuex ตรรกะของการมีทั้ง "การกระทำ" และ "การกลายพันธุ์คืออะไร" ฉันเข้าใจตรรกะของส่วนประกอบที่ไม่สามารถแก้ไขสถานะ (ซึ่งดูเหมือนว่าฉลาด) แต่การมีทั้งการกระทำและการกลายพันธุ์ดูเหมือนว่าคุณกำลังเขียนฟังก์ชันหนึ่งเพื่อเรียกใช้ฟังก์ชันอื่นเพื่อเปลี่ยนสถานะ อะไรคือความแตกต่างระหว่าง "การกระทำ" และ "การกลายพันธุ์" พวกเขาทำงานร่วมกันอย่างไรและ moreso ฉันสงสัยว่าทำไมนักพัฒนา Vuex จึงตัดสินใจทำเช่นนี้

173 vue.js vuex

17

vue.js 2 วิธีดูค่าร้านค้าจาก vuex

ฉันใช้vuexและvuejs 2ร่วมกัน ฉันยังใหม่กับvuexฉันต้องการดูการstoreเปลี่ยนแปลงตัวแปร ฉันต้องการเพิ่มwatchฟังก์ชั่นในของฉันvue component นี่คือสิ่งที่ฉันมี: import Vue from 'vue'; import { MY_STATE, } from './../../mutation-types'; export default { [MY_STATE](state, token) { state.my_state = token; }, }; ฉันต้องการทราบว่ามีการเปลี่ยนแปลงใด ๆ ในหรือไม่ my_state ฉันจะดูstore.my_stateในองค์ประกอบ vuejs ของฉันได้อย่างไร

169 javascript vue.js vuejs2 vuex

6

[เตือน Vue]: ไม่พบองค์ประกอบ

ฉันใช้Vuejs นี่คือมาร์กอัปของฉัน: <body> <div id="main"> <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> </div> </body> นี่คือรหัสของฉัน: var main = new Vue({ el: '#main', data: { currentActivity: 'home' } }) ; เมื่อฉันโหลดหน้าฉันได้รับคำเตือนนี้: [Vue warn]: Cannot find element: #main ผมทำอะไรผิดหรือเปล่า?

166 javascript mvvm vue.js

9

วิธีการเรียกฟังก์ชั่นเกี่ยวกับองค์ประกอบของเด็กในเหตุการณ์ผู้ปกครอง

บริบท ใน Vue 2.0 เอกสารและอื่น ๆระบุอย่างชัดเจนว่าการสื่อสารจากพ่อแม่ถึงเด็กเกิดขึ้นผ่านอุปกรณ์ประกอบฉาก คำถาม ผู้ปกครองบอกให้เด็กรู้เหตุการณ์ที่เกิดขึ้นผ่านอุปกรณ์ประกอบฉากได้อย่างไร ฉันควรจะดูเหตุการณ์ที่เรียกว่าเสา? ไม่รู้สึกว่าถูกต้องและไม่ทำทางเลือก ( $emit/ $onสำหรับเด็กสู่ผู้ปกครองและเป็นโมเดลฮับสำหรับองค์ประกอบที่อยู่ห่างไกล) ตัวอย่าง ฉันมีคอนเทนเนอร์หลักและจำเป็นต้องแจ้งคอนเทนเนอร์ย่อยของเด็กว่าการมีส่วนร่วมในการดำเนินการบางอย่างกับ API นั้นทำได้ดี ฉันต้องการที่จะสามารถเรียกใช้ฟังก์ชั่น

164 javascript vue.js event-handling vuejs2

3

ความแตกต่างระหว่าง @click และ v-on: คลิก Vuejs

คำถามควรชัดเจนพอ :) แต่ฉันเห็นว่ามีคนใช้: <button @click="function()">press</button> มีคนใช้: <button v-on:click="function()">press</button> แต่จริงๆแล้วอะไรคือความแตกต่างระหว่างสอง (ถ้ามี)

160 vue.js vuejs-directive

11

forEach ไม่ใช่ข้อผิดพลาดของฟังก์ชันกับอาร์เรย์ JavaScript

ฉันกำลังพยายามสร้างลูปง่ายๆ: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) แต่ฉันได้รับข้อผิดพลาดต่อไปนี้: VM384: 53 Uncaught TypeError: parent.children.forEach ไม่ใช่ฟังก์ชัน แม้ว่าparent.childrenบันทึก: อะไรคือปัญหา? หมายเหตุ: นี่เป็นJSFiddle

160 javascript ecmascript-6 vue.js

2

มีวิธีการส่งการกระทำระหว่างสองโมดูล vuex เนมสเปซหรือไม่?

เป็นไปได้หรือไม่ที่จะส่งการกระทำระหว่างโมดูลเนมสเปซ เช่นฉันมีโมดูล "gameboard" และ "การแจ้งเตือน" ของโมดูล vuex แต่ละคนมีเนมสเปซ ฉันต้องการส่งการกระทำจาก gameboard ไปยังโมดูลการแจ้งเตือน ฉันคิดว่าฉันสามารถใช้ชื่อโมดูลในชื่อการกระทำการจัดส่งเช่นนี้: // store/modules/gameboard.js const actions = { myaction ({dispatch}) { ... dispatch('notification/triggerSelfDismissingNotifcation', {...}) } } // store/modules/notification.js const actions = { triggerSelfDismissingNotification (context, payload) { ... } } แต่เมื่อฉันพยายามทำสิ่งนี้ฉันได้รับข้อผิดพลาดที่ทำให้ฉันสิ่ง vuex พยายามส่งการกระทำภายในโมดูล gameboard ของฉัน: [vuex] ประเภทการกระทำในท้องถิ่นที่ไม่รู้จัก: การแจ้งเตือน / ทริกเกอร์ SelfDismissing …

159 vue.js vuejs2 vuex

3

การส่งเหตุการณ์และอาร์กิวเมนต์ไปที่ v-on ใน Vue.js

ฉันผ่านพารามิเตอร์ในv-on:inputคำสั่ง ถ้าฉันไม่ผ่านมันฉันสามารถเข้าถึงเหตุการณ์ในวิธีการ มีวิธีใดบ้างที่ฉันยังสามารถเข้าถึงเหตุการณ์เมื่อส่งพารามิเตอร์ไปยังฟังก์ชัน ไม่ใช่ว่าฉันใช้ vue-router: นี่คือโดยไม่ต้องผ่านพารามิเตอร์ ฉันสามารถเข้าถึงวัตถุเหตุการณ์ HTML <input type="number" v-on:input="addToCart" min="0" placeholder="0"> จาวาสคริ methods: { addToCart: function (event) { // I need to access the element by using event.target console.log('In addToCart') console.log(event.target) } } นี่คือเมื่อผ่านพารามิเตอร์ ฉันไม่สามารถเข้าถึงวัตถุเหตุการณ์ HTML <input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0"> จาวาสคริ methods: { addToCart: function (id) { …

158 vue.js

11

ฉันจะซ่อนไวยากรณ์ VueJS ขณะที่กำลังโหลดหน้าได้อย่างไร

อาจเป็นคำถามเล็กน้อย ดังนั้นเมื่อฉันรันแอปพลิเคชั่น vuejs บนเบราว์เซอร์พร้อมเปิดใช้งานความเร็วในการควบคุมปริมาณการดาวน์โหลด (ตั้งค่าเป็นการเชื่อมต่อต่ำ) ฉันได้ผลลัพธ์ไวยากรณ์ vue ที่ยังไม่เสร็จในเบราว์เซอร์ ฉันรู้ว่าเราสามารถหลอกลวงสิ่งนี้ด้วยการแสดงภาพที่โหลดก่อนที่จะโหลดหน้าทั้งหมด แต่มันมีทางออกที่ดีที่สุดในการแก้ไขปัญหานี้หรือไม่?

156 javascript vue.js

13

vuejs อัพเดตข้อมูลพาเรนต์จากคอมโพเนนต์ชายด์

ฉันเริ่มเล่นกับ vuejs (2.0) ฉันสร้างหน้าง่าย ๆ ด้วยองค์ประกอบหนึ่งในนั้น เพจมีอินสแตนซ์ Vue หนึ่งอินสแตนซ์พร้อมข้อมูล ในหน้านั้นฉันลงทะเบียนและเพิ่มองค์ประกอบเป็น html input[type=text]องค์ประกอบที่มีหนึ่ง ฉันต้องการให้ค่านั้นสะท้อนถึงแม่ (อินสแตนซ์ Vue หลัก) ฉันจะอัพเดทข้อมูลพาเรนต์ของส่วนประกอบได้อย่างไร ผ่านเสาที่ถูกผูกไว้จากผู้ปกครองไม่ดีและส่งคำเตือนไปยังคอนโซล พวกเขามีบางอย่างในเอกสารของพวกเขา แต่มันไม่ทำงาน

155 javascript vue.js vue-component

12

วิธีเพิ่มสคริปต์ JS ภายนอกให้กับ VueJS Components

ฉันจะใช้สคริปต์ภายนอกสองสคริปต์สำหรับเกตเวย์การชำระเงิน ตอนนี้ทั้งคู่ถูกใส่ในindex.htmlไฟล์ อย่างไรก็ตามฉันไม่ต้องการโหลดไฟล์เหล่านี้ในตอนต้น จำเป็นต้องใช้เกตเวย์การชำระเงินเฉพาะเมื่อผู้ใช้เปิดส่วนประกอบเฉพาะ ( using router-view) อย่างไรก็ตามมีเพื่อให้บรรลุนี้

151 javascript vue.js vuejs2 vue-component vue-router

2

ค่าเริ่มต้นสำหรับอุปกรณ์ประกอบฉาก Vue และวิธีตรวจสอบว่าผู้ใช้ไม่ได้ตั้งค่าเสาหรือไม่?

1.ฉันจะตั้งค่าเริ่มต้นสำหรับส่วนประกอบ prop ใน Vue 2 ได้อย่างไร? ตัวอย่างเช่นมีmoviesองค์ประกอบง่ายๆที่สามารถใช้ในลักษณะนี้: <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } แต่หากผู้ใช้ไม่ได้ระบุyear: <movies></movies> จากนั้นส่วนประกอบจะใช้ค่าเริ่มต้นสำหรับyearเสา 2.วิธีใดที่ดีที่สุดในการตรวจสอบว่าผู้ใช้ไม่ได้ตั้งเสาหรือไม่? นี่เป็นวิธีที่ดีไหม: if (this.year != null) { // do something } หรืออาจจะเป็น: if (!this.year) { // do something } เหรอ?

150 javascript vue.js vue-component

13

วิธีใช้ debounce ใน Vue2

ฉันมีช่องป้อนข้อมูลอย่างง่ายในเทมเพลต Vue และฉันต้องการใช้ debounce มากหรือน้อยเช่นนี้ <input type="text" v-model="filterKey" debounce="500"> แต่debounceคุณสมบัติที่ได้รับการคัดค้านใน Vue 2 คำแนะนำนี้บอกว่า: "ใช้ v-on: input + ฟังก์ชั่น debounce บุคคลที่สาม" คุณใช้มันอย่างถูกต้องได้อย่างไร? ฉันพยายามที่จะใช้มันโดยใช้lodash , v-on: inputและv-modelแต่ฉันสงสัยว่ามันเป็นไปได้ที่จะทำโดยไม่มีตัวแปรพิเศษหรือไม่ ในเทมเพลต: <input type="text" v-on:input="debounceInput" v-model="searchInput"> ในสคริปต์: data: function () { return { searchInput: '', filterKey: '' } }, methods: { debounceInput: _.debounce(function () { this.filterKey …

143 vue.js vuejs2 debouncing

3

จะส่งค่าจากข้อมูล Vue ไปยัง href ได้อย่างไร

ฉันพยายามทำสิ่งนี้: <div v-for="r in rentals"> <a bind-href="'/job/'r.id"> {{ r.job_title }} </a> </div> ฉันไม่สามารถหาวิธีเพิ่มมูลค่าr.idให้กับจุดสิ้นสุดของhrefแอตทริบิวต์เพื่อให้ฉันสามารถเรียก API ได้ ข้อเสนอแนะใด ๆ

142 vue.js vue-router

14

วิธีแก้ไข 'Unchecked runtime.lastError: พอร์ตข้อความปิดก่อนได้รับการตอบกลับ' ปัญหา chrome?

ฉันใช้ VueJS และ Laravel สำหรับโครงการของฉัน ปัญหานี้เริ่มแสดงเมื่อไม่นานมานี้และยังปรากฏในสาขาคอมไพล์เก่า ข้อผิดพลาดนี้แสดงเฉพาะในเบราว์เซอร์ Chrome

141 laravel google-chrome vue.js

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