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

ฉันอ่านเอกสาร แต่ไม่เข้าใจ ฉันรู้ว่าข้อมูลใดคำนวณดูวิธีการทำ แต่สิ่งที่nextTick()ใช้สำหรับ vuejs?

121 vue.js  vuejs2 

ใน VueJS เราสามารถเพิ่มหรือลบองค์ประกอบ DOM โดยใช้ v-if: <button v-if="isRequired">Important Button</button> แต่มีวิธีเพิ่ม / ลบแอตทริบิวต์ขององค์ประกอบ dom เช่นสำหรับการตั้งค่าแอตทริบิวต์ที่ต้องการตามเงื่อนไขต่อไปนี้: Username: <input type="text" name="username" required> โดยสิ่งที่คล้ายกับ: Username: <input type="text" name="username" v-if="name.required" required> ความคิดใด ๆ ?

119 javascript  vue.js  vuejs2 

ฉันมีส่วนประกอบที่มีการตรวจสอบความถูกต้องของรูปแบบบางอย่าง เป็นแบบฟอร์มการชำระเงินหลายขั้นตอน โค้ดด้านล่างนี้ใช้สำหรับขั้นตอนแรก ฉันต้องการตรวจสอบว่าผู้ใช้ป้อนข้อความบางส่วนเก็บชื่อไว้ในสถานะส่วนกลางแล้วส่งไปยังขั้นตอนถัดไป ฉันใช้vee-validateและ vuex <template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> <span class="icon is-small is-right" v-if="errors.has('name')"> <i class="fa fa-warning"></i> </span> </div> <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> </div> <div class="field pull-right"> <button …

118 vue.js  vuejs2  vue-component  vuex 

ฉันจะวนซ้ำผ่าน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-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 บล็อก: ฉันใช้ Vuex เป็นเก็บข้อมูลของฉันและฉันต้องตั้งค่าสองgettersกgetPostทะเยอทะยานสำหรับการเรียกpostตามรหัส, เช่นเดียวกับlistFeaturedPostsที่ผลตอบแทนไม่กี่ตัวอักษรแรกของแต่ละโพสต์ที่โดดเด่น สคีมาพื้นที่เก็บข้อมูลสำหรับรายการโพสต์ที่แนะนำอ้างอิงโพสต์ตามรหัสของพวกเขา รหัสเหล่านี้ต้องได้รับการแก้ไขเป็นโพสต์จริงเพื่อจุดประสงค์ในการแสดงข้อความที่ตัดตอนมา store / state.js export const state = { featuredPosts: [2, 0], posts: [ 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor …

113 vuejs2  vuex 

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

113 javascript  vue.js  vuejs2  state  vuex 

ฉันต้องการเชื่อมตัวแปร 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 

ฉันมีมุมมองแบบไดนามิก: <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 

ส่วนประกอบ vue ของฉันเป็นดังนี้: <template> <div> <div class="panel-group" v-for="item in list"> ... <div class="panel-body"> <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne"> Show </a> </div> <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel"> ... </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list …

100 vue.js  vuejs2  vue-component 

ฉันต้องการใส่ฟังก์ชันทั้งหมดของฉันที่พูดคุยกับเซิร์ฟเวอร์และดึงข้อมูลลงในไฟล์ที่ใช้ซ้ำได้ใน VueJS ปลั๊กอินดูเหมือนจะไม่ใช่ทางเลือกที่ดีที่สุด แม่แบบส่วนประกอบน้อย .. ?

99 service  vue.js  vuejs2 

ผมมีกรณีที่ในของฉันVue.jsกับwebpackapp เว็บฉันต้องแสดงภาพแบบไดนามิก ฉันต้องการแสดงimgตำแหน่งที่เก็บชื่อไฟล์ของรูปภาพในตัวแปร ตัวแปรที่เป็นcomputedสถานที่ให้บริการซึ่งจะกลับตัวแปรเก็บซึ่งจะถูกถ่ายทอดสดในประชากรVuexbeforeMount <div class="col-lg-2" v-for="pic in pics"> <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic"> </div> อย่างไรก็ตามมันทำงานได้อย่างสมบูรณ์เมื่อฉันทำ: <img src="../assets/dog.png" alt="dog"> กรณีของฉันคล้ายกับซอนี้แต่ที่นี่ใช้งานได้กับ img URL แต่ในของฉันที่มีเส้นทางไฟล์จริงมันใช้ไม่ได้ วิธีที่ถูกต้องควรทำอย่างไร?

99 javascript  html  vue.js  vuejs2 

ดูเหมือนว่า Vue.js 2.0 จะไม่ส่งเหตุการณ์จากแกรนด์เด็กไปยังองค์ประกอบหลักของแกรนด์ Vue.component('parent', { template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>', data(){ return { action: 'No action' } }, methods: { performAction() { this.action = 'actionDone' } } }) Vue.component('child', { template: '<div>I am the child <grand-child></grand-child></div>' }) Vue.component('grand-child', { template: '<div>I am the …

98 javascript  vuejs2  vue.js