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

ฉันจะวนซ้ำผ่านv-forX (เช่น 10) ครั้งได้อย่างไร // want to repeat this (e.g.) 10 times <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> เอกสารแสดง: <ul> <li v-for="item in 10">{{ item }}</li> </ul> // or <li v-for="n in 10">{{ n }} </li> // this doesn't work <li v-for="item …

117 javascript  vue.js  vuejs2  v-for 

ฉันต้องการสร้างคอมโพเนนต์ด้วย Vue.js ที่มีเลเบลและอินพุต ตัวอย่างเช่น : <label for="inputId">Label text</label> <input id="inputId" type="text" /> ฉันจะตั้งรหัสเฉพาะสำหรับแต่ละอินสแตนซ์ของคอมโพเนนต์ได้อย่างไร ขอบคุณ.

115 vue.js 

วิธีเปลี่ยนหมายเลขพอร์ตในโครงการ Vue-cli เพื่อให้รันบนพอร์ตอื่นแทน 8080

115 vue.js  vuejs2  command-line-interface  vue-cli 

ภาพรวม ใน Vue.js 2.x, model.syncจะเลิก ดังนั้นวิธีที่เหมาะสมในการสื่อสารระหว่างส่วนประกอบพี่น้องในVue.js 2.xคืออะไร? พื้นหลัง ตามที่ผมเข้าใจ Vue 2.x วิธีที่แนะนำสำหรับพี่น้องสื่อสารคือการใช้ร้านค้าหรือรถบัสเหตุการณ์ ตามที่Evan (ผู้สร้าง Vue): นอกจากนี้ยังควรค่าแก่การกล่าวถึง "การส่งผ่านข้อมูลระหว่างส่วนประกอบ" โดยทั่วไปเป็นความคิดที่ไม่ดีเพราะในที่สุดโฟลว์ข้อมูลจะไม่สามารถติดตามได้และแก้ไขข้อบกพร่องได้ยากมาก หากชิ้นส่วนของข้อมูลความต้องการที่จะใช้ร่วมกันโดยองค์ประกอบหลายชอบ ร้านค้าทั่วโลกหรือVuex [ ลิงก์ไปยังการสนทนา ] และ: .onceและ.syncเลิกใช้แล้ว ตอนนี้อุปกรณ์ประกอบฉากจะลงทางเดียวเสมอ ในการสร้างผลข้างเคียงในขอบเขตหลักส่วนประกอบจำเป็นต้องemitสร้างเหตุการณ์อย่างชัดเจนแทนที่จะอาศัยการผูกโดยนัย ดังนั้นอีวานแสดงให้เห็นการใช้และ$emit()$on() ความกังวล สิ่งที่ฉันกังวลคือ: แต่ละคนstoreและeventมีการมองเห็นทั่วโลก (ถูกต้องฉันหากฉันผิด); เป็นการสิ้นเปลืองเกินไปที่จะสร้างร้านค้าใหม่สำหรับการสื่อสารเล็กน้อย สิ่งที่ฉันต้องการคือขอบเขต eventsหรือstoresการมองเห็นสำหรับส่วนประกอบพี่น้อง (หรือบางทีฉันอาจไม่เข้าใจแนวคิดข้างต้น) คำถาม ดังนั้นวิธีที่ถูกต้องในการสื่อสารระหว่างส่วนประกอบพี่น้องคืออะไร?

114 javascript  vue.js  vuejs2  vue-component  vuex 

ฉันพยายามตั้งค่าพารามิเตอร์การสืบค้นด้วยVue-routerเมื่อเปลี่ยนช่องป้อนข้อมูลฉันไม่ต้องการไปที่หน้าอื่น แต่ต้องการแก้ไขพารามิเตอร์การสืบค้น url ในหน้าเดียวกันฉันกำลังทำสิ่งนี้: this.$router.replace({ query: { q1: "q1" } }) แต่สิ่งนี้ยังรีเฟรชหน้าและตั้งค่าตำแหน่ง y เป็น 0 เช่นเลื่อนไปที่ด้านบนสุดของหน้า นี่เป็นวิธีที่ถูกต้องในการตั้งค่าพารามิเตอร์การสืบค้น URL หรือมีวิธีที่ดีกว่านี้ แก้ไข: นี่คือรหัสเราเตอร์ของฉัน: export default new Router({ mode: 'history', scrollBehavior: (to, from, savedPosition) => { if (to.hash) { return {selector: to.hash} } else { return {x: 0, y: 0} } }, routes: …

114 javascript  vue-router  vue.js 

แอปของฉันใช้ Firebase API สำหรับการตรวจสอบผู้ใช้โดยบันทึกสถานะการเข้าสู่ระบบเป็นค่าบูลีนในสถานะ Vuex เมื่อผู้ใช้เข้าสู่ระบบฉันตั้งค่าสถานะการเข้าสู่ระบบและแสดงปุ่มเข้าสู่ระบบ / ออกจากระบบตามเงื่อนไข แต่เมื่อรีเฟรชหน้าแล้วสถานะของแอป vue จะหายไปและรีเซ็ตเป็นค่าเริ่มต้น สิ่งนี้ทำให้เกิดปัญหาแม้ว่าผู้ใช้จะเข้าสู่ระบบและเพจได้รับการรีเฟรชสถานะการเข้าสู่ระบบจะถูกตั้งค่ากลับเป็นเท็จและปุ่มล็อกอินจะแสดงแทนปุ่มล็อกเอาต์แม้ว่าผู้ใช้จะยังคงล็อกอินอยู่ก็ตาม .... ฉันจะทำอย่างไรเพื่อป้องกันพฤติกรรมนี้ ฉันจะใช้คุกกี้ได้ หรือไม่หรือวิธีการอื่นที่ดีกว่านี้ ... -

113 javascript  vue.js  vuejs2  state  vuex 

คำถาม: จะเรียกใช้หลายฟังก์ชันใน @click เดียวได้อย่างไร? (aka v-on:click)? ฉันเหนื่อย แบ่งฟังก์ชันด้วยเครื่องหมายอัฒภาค: <div @click="fn1('foo');fn2('bar')"> </div>; ใช้หลายตัว@click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>; แต่จะทำอย่างไรให้ถูกต้อง? PS : แน่นอนว่าฉันทำได้เสมอ <div v-on:click="fn3('foo', 'bar')"> </div> function fn3 (args) { fn1(args); fn2(args); } แต่บางครั้งมันก็ไม่ดี

112 javascript  vue.js 

ฉันต้องการกำหนดเส้นทางไปยังส่วนประกอบบางอย่างในสองวิธี - หนึ่งด้วยพารามิเตอร์หนึ่งโดยไม่ต้อง ฉันได้ค้นหาพารามิเตอร์ที่เป็นทางเลือกและไม่พบข้อมูลมากนัก ดังนั้นเส้นทางของฉัน: { path: '/offers/:member', component: Offers, name: 'offers', props: true, meta: { guest: false, needsAuth: true } }, เมื่อฉันเรียกมันด้วยพารามิเตอร์ทางโปรแกรมทุกอย่างเรียบร้อยดี this.$router.push({ path: /offers/1234 }); อย่างไรก็ตามฉันต้องเรียกมันผ่าน nav แบบนี้ด้วย <router-link to="/offers">Offers</router-link> offersองค์ประกอบยอมรับไม้ค้ำยัน props: ['member'], และส่วนประกอบที่ใช้เช่นนี้ <Offers :offers="data" :member="member"></Offers> ตอนนี้วิธีที่น่าเกลียดที่ฉันสามารถทำได้คือการทำซ้ำเส้นทางและทำให้หนึ่งในนั้นไม่ต้องใช้อุปกรณ์ประกอบฉาก: { path: '/offers', component: Offers, name: 'offers', props: false, meta: …

111 vue.js 

ฉันต้องการเชื่อมตัวแปร Vue.js กับ URL รูปภาพ สิ่งที่ฉันคำนวณ: imgPreUrl : function() { if (androidBuild) return "android_asset/www/"; else return ""; } ถ้าฉันสร้างสำหรับ Android: <img src="/android_asset/www/img/logo.png"> อื่น <img src="img/logo.png"> ฉันจะเชื่อมตัวแปรที่คำนวณเข้ากับ URL ได้อย่างไร ฉันลองแล้ว: <img src="{{imgPreUrl}}img/logo.png">

110 javascript  vue.js  vuejs2 

ฉันมีอาร์เรย์ที่เรียกpeopleว่ามีวัตถุดังนี้: ก่อน [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 32}, {id: 2, name: 'Joe', age: 38} ] สามารถเปลี่ยนแปลงได้: หลังจาก [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 33}, {id: 2, name: 'Joe', age: 38} ] สังเกตว่าแฟรงค์เพิ่งอายุ 33 ปี ฉันมีแอพที่ฉันพยายามดูอาร์เรย์คนและเมื่อค่าใด ๆ เปลี่ยนแปลงให้บันทึกการเปลี่ยนแปลง: …

108 javascript  vue.js  vuejs2 

ก่อนอื่นฉันอยากจะบอกว่าฉันยังใหม่กับ Vue และนี่เป็นโครงการแรกของฉันที่เคยใช้ Vue ฉันมีคอมโบบ็อกซ์และฉันต้องการทำอะไรบางอย่างที่แตกต่างจากคอมโบบ็อกซ์ที่เลือก ฉันใช้ไฟล์ vue.html และ typescript แยกกัน นี่คือรหัสของฉัน <select name="LeaveType" @change="onChange()" class="form-control"> <option value="1">Annual Leave/ Off-Day</option> <option value="2">On Demand Leave</option> </select> และนี่คือไฟล์ ts ของฉัน onChange(value) { console.log(value); } วิธีรับค่าตัวเลือกที่เลือกในฟังก์ชัน typescript ของฉัน ขอบคุณ.

108 javascript  html  asp.net-mvc  vue.js 

ฉันมีมุมมองแบบไดนามิก: <div id="myview"> <div :is="currentComponent"></div> </div> กับอินสแตนซ์ Vue ที่เกี่ยวข้อง: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); สิ่งนี้ทำให้ฉันสามารถเปลี่ยนองค์ประกอบได้แบบไดนามิก ในกรณีของฉันฉันมีสามองค์ประกอบที่แตกต่างกันmyComponent, และmyComponent1 myComponent2และฉันสลับระหว่างพวกเขาดังนี้: Vue.component('myComponent', { template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>" } myComponent1ตอนนี้ผมต้องการที่จะผ่านไปยังอุปกรณ์ประกอบฉาก ฉันจะส่งอุปกรณ์ประกอบฉากเหล่านี้ได้อย่างไรเมื่อฉันเปลี่ยนประเภทส่วนประกอบเป็นmyComponent1?

107 javascript  vue.js  vuejs2  vue-component 

ฉันต้องการแสดง div เมื่อวางเมาส์เหนือองค์ประกอบใน vue.js แต่ดูเหมือนว่าจะใช้งานไม่ได้ ดูเหมือนว่าจะไม่มีเหตุการณ์สำหรับการวางเมาส์เหนือหรือวางเมาส์ใน vue.js นี่มันเรื่องจริงเหรอ? เป็นไปได้ไหมที่จะรวมวิธีการโฮเวอร์ jquery และ vue เข้าด้วยกัน

105 javascript  vue.js 

ฉันมี 2 โครงการ Vue ที่มีจำนวนมาก (50+) ส่วนประกอบไฟล์เดียว ฉันใช้ Vue-Router สำหรับการกำหนดเส้นทางและ Vuex สำหรับสถานะ มีไฟล์ที่เรียกว่าhelpers.jsซึ่งมีฟังก์ชันวัตถุประสงค์ทั่วไปมากมายเช่นการใช้อักษรตัวแรกของสตริงเป็นตัวพิมพ์ใหญ่ ไฟล์นี้มีลักษณะดังนี้: export default { capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } } ไฟล์main.jsของฉันเริ่มต้นแอป: import Vue from 'vue' import VueResource from "vue-resource" import store from "./store" import Router from "./router" import App from "./components/App.vue" Vue.use(VueResource) const app = …

105 vue.js  vue-router 

ดังนั้นฉันต้องการส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบ Vue แต่ฉันคาดว่าอุปกรณ์ประกอบฉากเหล่านี้จะเปลี่ยนแปลงในอนาคตจากภายในส่วนประกอบนั้นเช่นเมื่อฉันอัปเดตส่วนประกอบ Vue นั้นจากภายในโดยใช้ AJAX ดังนั้นจึงมีไว้สำหรับการเริ่มต้นส่วนประกอบเท่านั้น cars-listองค์ประกอบองค์ประกอบ Vue ของฉันที่ฉันส่งผ่านอุปกรณ์ประกอบฉากที่มีคุณสมบัติเริ่มต้นไปที่single-car: // cars-list.vue <script> export default { data: function() { return { cars: [ { color: 'red', maxSpeed: 200, }, { color: 'blue', maxSpeed: 195, }, ] } }, } </script> <template> <div> <template v-for="car in cars"> <single-car :initial-properties="car"></single-car> </template> </div> …

101 javascript  vue.js