คำถามติดแท็ก vue-component

Component เป็นคุณลักษณะ Vue ที่มีประสิทธิภาพซึ่งช่วยให้สามารถขยายองค์ประกอบ HTML พื้นฐานเพื่อห่อหุ้มโค้ดที่ใช้ซ้ำได้

9
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, …
13
วิธีฟังการเปลี่ยนแปลง 'อุปกรณ์ประกอบฉาก'
ในเอกสาร 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: ...}ไม่ทำงาน
7
Vue v-on: การคลิกไม่ทำงานกับส่วนประกอบ
ฉันพยายามใช้คำสั่งคลิกเมื่อภายในองค์ประกอบ แต่ดูเหมือนจะไม่ทำงาน เมื่อฉันคลิกส่วนประกอบที่ไม่มีอะไรเกิดขึ้นเมื่อฉันควรได้รับ 'คลิกทดสอบ' ในคอนโซล ฉันไม่เห็นข้อผิดพลาดใด ๆ ในคอนโซลดังนั้นฉันไม่รู้ว่าฉันทำอะไรผิด 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: { …
13
vuejs อัพเดตข้อมูลพาเรนต์จากคอมโพเนนต์ชายด์
ฉันเริ่มเล่นกับ vuejs (2.0) ฉันสร้างหน้าง่าย ๆ ด้วยองค์ประกอบหนึ่งในนั้น เพจมีอินสแตนซ์ Vue หนึ่งอินสแตนซ์พร้อมข้อมูล ในหน้านั้นฉันลงทะเบียนและเพิ่มองค์ประกอบเป็น html input[type=text]องค์ประกอบที่มีหนึ่ง ฉันต้องการให้ค่านั้นสะท้อนถึงแม่ (อินสแตนซ์ Vue หลัก) ฉันจะอัพเดทข้อมูลพาเรนต์ของส่วนประกอบได้อย่างไร ผ่านเสาที่ถูกผูกไว้จากผู้ปกครองไม่ดีและส่งคำเตือนไปยังคอนโซล พวกเขามีบางอย่างในเอกสารของพวกเขา แต่มันไม่ทำงาน
12
วิธีเพิ่มสคริปต์ JS ภายนอกให้กับ VueJS Components
ฉันจะใช้สคริปต์ภายนอกสองสคริปต์สำหรับเกตเวย์การชำระเงิน ตอนนี้ทั้งคู่ถูกใส่ในindex.htmlไฟล์ อย่างไรก็ตามฉันไม่ต้องการโหลดไฟล์เหล่านี้ในตอนต้น จำเป็นต้องใช้เกตเวย์การชำระเงินเฉพาะเมื่อผู้ใช้เปิดส่วนประกอบเฉพาะ ( using router-view) อย่างไรก็ตามมีเพื่อให้บรรลุนี้
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 } เหรอ?
4
Vue 'ค่าเริ่มต้นการส่งออก' เทียบกับ 'Vue ใหม่'
ฉันเพิ่งติดตั้ง Vue และทำตามแบบฝึกหัดเพื่อสร้างโครงการโดยใช้เทมเพลต vue-cli webpack เมื่อสร้างส่วนประกอบฉันสังเกตเห็นว่ามันผูกข้อมูลของเราไว้ภายในสิ่งต่อไปนี้: export default { name: 'app', data: [] } ในขณะที่บทช่วยสอนอื่น ๆ ฉันเห็นว่าข้อมูลถูกผูกไว้จาก: new Vue({ el: '#app', data: [] )} อะไรคือความแตกต่างและทำไมดูเหมือนว่าไวยากรณ์ระหว่างทั้งสองแตกต่างกัน? ฉันมีปัญหาในการทำให้โค้ด 'new Vue' ทำงานจากภายในแท็กที่ฉันใช้จาก App.vue ที่สร้างโดย vue-cli
4
Vuex - คุณสมบัติที่คำนวณ "ชื่อ" ถูกกำหนดให้ แต่ไม่มีตัวตั้งค่า
ฉันมีส่วนประกอบที่มีการตรวจสอบความถูกต้องของรูปแบบบางอย่าง เป็นแบบฟอร์มการชำระเงินหลายขั้นตอน โค้ดด้านล่างนี้ใช้สำหรับขั้นตอนแรก ฉันต้องการตรวจสอบว่าผู้ใช้ป้อนข้อความบางส่วนเก็บชื่อไว้ในสถานะส่วนกลางแล้วส่งไปยังขั้นตอนถัดไป ฉันใช้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 …
6
การสื่อสารระหว่างส่วนประกอบพี่น้องใน VueJs 2.0
ภาพรวม ใน 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การมองเห็นสำหรับส่วนประกอบพี่น้อง (หรือบางทีฉันอาจไม่เข้าใจแนวคิดข้างต้น) คำถาม ดังนั้นวิธีที่ถูกต้องในการสื่อสารระหว่างส่วนประกอบพี่น้องคืออะไร?
4
ส่งผ่านอุปกรณ์ประกอบฉากแบบไดนามิกไปยังองค์ประกอบไดนามิกใน VueJS
ฉันมีมุมมองแบบไดนามิก: <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?
6
วิธีแก้การแก้ไข Interpolation ภายในแอตทริบิวต์ถูกลบออก ใช้ v-bind หรือโคลอนชวเลข? Vue.JS 2
ส่วนประกอบ 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 …
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) …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.