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

ฉันสร้างตารางโดยใช้ Vue.js และฉันต้องการที่จะกำหนดกิจกรรมสำหรับแต่ละแถวที่ผ่านonClick contactIDนี่คือรหัส: <tr v-for="item in items" class="static" v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }" @click="addToCount('{item.contactID}')" > <td>{{item.contactName}}</td> <td>{{item.recipient}}</td> </tr> เมื่อคลิกแถวมันกำลังโทรaddToCount()ซึ่งใช้งานได้ ฉันต้องการส่งitem.contactIDต่อไปยังaddToCount(). มีใครแนะนำไวยากรณ์ที่ถูกต้องสำหรับสิ่งนี้ได้ไหม

101 vue.js 

ส่วนประกอบ 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 

ฉันต้องการที่จะเข้าถึงstate.sessionในจากinstance.js records_view.jsสิ่งนี้สำเร็จได้อย่างไร? store / module / instance.js const state = { // This is what I want to access in records_view.js session: {} }; const getters = { sessionGetter: state => state.session }; store / module / records_view.js const actions = { getSettingsAction (context, props) { // This is how …

100 javascript  vue.js  vuex 

ฉันต้องการใส่ฟังก์ชันทั้งหมดของฉันที่พูดคุยกับเซิร์ฟเวอร์และดึงข้อมูลลงในไฟล์ที่ใช้ซ้ำได้ใน 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 

ฉันกำลังมองหา URL ที่ถูกต้องเพื่ออ้างอิงเนื้อหาแบบคงที่เช่นรูปภาพภายใน Vue javascript ตัวอย่างเช่นฉันกำลังสร้างเครื่องหมายแผ่นพับโดยใช้รูปภาพไอคอนที่กำหนดเองและฉันได้ลองใช้ URL หลายรายการแล้ว แต่ทั้งหมดส่งกลับ404 (Not Found): Main.vue: var icon = L.icon({ iconUrl: './assets/img.png', iconSize: [25, 25], iconAnchor: [12, 12] }); ฉันได้ลองใส่รูปภาพในโฟลเดอร์ assets และโฟลเดอร์แบบคงที่โดยไม่มีโชค ฉันต้องบอกให้ vue โหลดภาพเหล่านั้นหรือไม่?

98 javascript  vue.js  leaflet 

ดูเหมือนว่า 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 

Наэтотвопросестьответына กองมากเกินнарусском : Какв vue เตอร์открытьссылкувновойвкладке? ฉันมีหน้าสรุปและหน้าย่อยรายละเอียด เส้นทางทั้งหมดถูกนำไปใช้กับvue-router(v 0.7.x) โดยใช้การนำทางแบบโปรแกรมดังนี้: this.$router.go({ path: "/link/to/page" }) อย่างไรก็ตามเมื่อฉันกำหนดเส้นทางจากหน้าสรุปไปยังหน้าย่อยฉันจำเป็นต้องเปิดหน้าย่อยในแท็บใหม่เช่นเดียวกับการเพิ่ม_target="blank"ลงใน<a>แท็ก มีวิธีทำไหม?

97 javascript  vue.js  vue-router 

ฉันมีฟังก์ชันที่ช่วยกรองข้อมูล ฉันกำลังใช้v-on:changeเมื่อผู้ใช้เปลี่ยนการเลือก แต่ฉันยังต้องการฟังก์ชันที่จะเรียกใช้ก่อนที่ผู้ใช้จะเลือกข้อมูล ฉันได้ทำเช่นเดียวกันกับการAngularJSใช้งานก่อนหน้านี้ng-initแต่ฉันเข้าใจว่าไม่มีคำสั่งดังกล่าวในvue.js นี่คือหน้าที่ของฉัน: getUnits: function () { var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status}; this.$http.post('/admin/units', input).then(function (response) { console.log(response.data); this.units = response.data; }, function (response) { console.log(response) }); } ในbladeไฟล์ฉันใช้แบบฟอร์มใบมีดเพื่อดำเนินการตัวกรอง: <div class="large-2 columns"> {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!} </div> …

97 javascript  vue.js  vuejs2 

สมมติว่าฉันมีอินสแตนซ์ Vue ดังนี้: new Vue({ el: '#app', data: { word: 'foo', }, filters: { capitalize: function(text) { return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); }); } }, methods: { sendData: function() { var payload = this.$filters.capitalize(this.word); // how? } } } ฉันสามารถใช้ตัวกรองในเทมเพลตได้อย่างง่ายดาย: <span>The word is {{ word | capitalize }}</span> แต่ฉันจะใช้ตัวกรองนี้จากวิธีอินสแตนซ์หรือคุณสมบัติที่คำนวณได้อย่างไร …

97 javascript  vue.js 

ฉันมีสององค์ประกอบที่ซ้อนกันวิธีใดที่เหมาะสมในการเข้าถึงเมธอดลูกจากพาเรนต์? this.$children[0].myMethod() ดูเหมือนจะทำเคล็ดลับ แต่มันก็ค่อนข้างน่าเกลียดไม่ใช่เหรอมีอะไรจะดีไปกว่านี้: <script> import child from './my-child' export default { components: { child }, mounted () { this.$children[0].myMethod() } } </script>

96 javascript  vue.js 

ฉันกำลังพยายามเริ่มการfoo()ทำงานของฟังก์ชันด้วย@clickแต่อย่างที่คุณเห็นต้องกดปุ่มตัวเลือกสองครั้งเพื่อเริ่มต้นเหตุการณ์อย่างถูกต้อง จับค่าในครั้งที่สองที่กดเท่านั้น ... ฉันต้องการเริ่มต้นกิจกรรมโดยไม่@clickเพียง แต่เริ่มการทำงานของเหตุการณ์เมื่อv-model(srStatus) เปลี่ยนแปลง นี่คือซอของฉัน: http://fiddle.jshell.net/wanxe/vsa46bw8/

95 javascript  events  vue.js 

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) …

95 javascript  vue.js  vuejs2  vue-component 

ฉันเห็นในคำขอดึงนี้: เพิ่ม router.reload() โหลดซ้ำด้วยเส้นทางปัจจุบันและเรียก data hook อีกครั้ง แต่เมื่อฉันลองออกคำสั่งต่อไปนี้จากส่วนประกอบ Vue: this.$router.reload() ฉันได้รับข้อผิดพลาดนี้: Uncaught TypeError: this.$router.reload is not a function ฉันค้นหาในเอกสารแต่ไม่พบสิ่งที่เกี่ยวข้อง vue / vue-router ให้บริการบางอย่างเช่นนี้หรือไม่? เวอร์ชันซอฟต์แวร์ที่ฉันสนใจ ได้แก่ : "vue": "^2.1.0", "vue-router": "^2.0.3", ปล. ฉันรู้ว่าlocation.reload()เป็นทางเลือกหนึ่ง แต่ฉันกำลังมองหาตัวเลือก Vue ดั้งเดิม

95 vue.js  vue-router  vuejs2 

ฉันได้สร้างvue webpackโครงการโดยใช้vue-cliไฟล์. vue init webpack myproject จากนั้นรันโปรเจ็กต์ภายใต้devโหมด: npm run dev ฉันได้รับข้อผิดพลาดนี้: ไม่สามารถโหลดทรัพยากร: เซิร์ฟเวอร์ตอบสนองด้วยสถานะ 404 (ไม่พบ) http: // localhost: 8080 / favicon.ico ดังนั้นใน webpack วิธีการนำเข้าfavicon.icoอย่างถูกต้อง?

94 html  ecmascript-6  webpack  vue.js  favicon