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

ฉันจำเป็นต้องแทรกความคิดเห็นในไฟล์ vue.js สำหรับการอ้างอิงในอนาคต แต่ฉันไม่พบวิธีที่คุณทำในเอกสารนี้ ฉันได้พยายาม//, /**/, {{-- --}}และ{# #}แต่ไม่มีของพวกเขาดูเหมือนจะทำงาน ฉันใช้ใบมีดของ Laravel นี่คือsample_file.vue: <template> <div class="media"> <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button> {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}} <div class="media-left"> <a href="#"> <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image …

94 vue.js  blade  laravel-blade 

ฉันมีส่วนประกอบที่มีชุดข้อมูลเริ่มต้นเฉพาะ: data: function (){ return { modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue' submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes' addressToConfirm: null, bestViewedByTheseBounds: null, location:{ name: null, address: null, position: null } } นี่เป็นข้อมูลสำหรับหน้าต่างโมดอลดังนั้นเมื่อแสดงว่าฉันต้องการให้เริ่มต้นด้วยข้อมูลนี้ หากผู้ใช้ยกเลิกจากหน้าต่างฉันต้องการรีเซ็ตข้อมูลทั้งหมดเป็นสิ่งนี้ ฉันรู้ว่าฉันสามารถสร้างวิธีการรีเซ็ตข้อมูลและตั้งค่าคุณสมบัติของข้อมูลทั้งหมดด้วยตนเองกลับไปที่เดิม: reset: function (){ this.modalBodyDisplay = 'getUserInput'; this.submitButtonText = 'Lookup'; this.addressToConfirm = null; this.bestViewedByTheseBounds = …

93 javascript  mvvm  vue.js 

ฉันยังใหม่กับ Vuejs ทำบางอย่าง แต่ฉันไม่รู้ว่ามันเป็นวิธีที่ง่าย / ถูกต้อง สิ่งที่ฉันต้องการ ฉันต้องการวันที่บางวันในอาร์เรย์และอัปเดตในเหตุการณ์ ก่อนอื่นฉันลองใช้ Vue.set แต่มันไม่ได้ผล หลังจากเปลี่ยนรายการอาร์เรย์ของฉันแล้ว: this.items[index] = val; this.items.push(); ฉันดัน () ไม่มีอะไรไปที่อาร์เรย์และมันจะอัปเดต .. แต่บางครั้งรายการสุดท้ายจะถูกซ่อนไว้อย่างใด ... ฉันคิดว่าโซลูชันนี้ค่อนข้างแฮ็คฉันจะทำให้เสถียรได้อย่างไร รหัสง่ายๆอยู่ที่นี่: new Vue({ el: '#app', data: { f: 'DD-MM-YYYY', items: [ "10-03-2017", "12-03-2017" ] }, methods: { cha: function(index, item, what, count) { console.log(item + " index …

93 javascript  vue.js  momentjs  vuejs2 

ฉันกำลังเรียนรู้ Vue.js ใน Vue ของฉันฉันมีช่องข้อความและปุ่ม ตามค่าเริ่มต้นปุ่มนี้จะส่งแบบฟอร์มเมื่อมีคนกดปุ่ม Enter บนแป้นพิมพ์ เมื่อมีคนพิมพ์ในช่องข้อความฉันต้องการจับแต่ละคีย์ที่กด ถ้าคีย์เป็นสัญลักษณ์ '@' ฉันต้องการทำอะไรเป็นพิเศษ หากคีย์ที่กดเป็นปุ่ม "Enter" ฉันก็ต้องการทำสิ่งที่พิเศษเช่นกัน อย่างหลังคือสิ่งที่ท้าทายฉัน ขณะนี้ฉันมีFiddleซึ่งมีรหัสนี้: new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { validateEmailAddress: function(e) { if (e.keyCode === 13) { alert('Enter was pressed'); } else if (e.keyCode === 50) { alert('@ was …

93 javascript  vue.js 

ฉันพยายามผูก src ของรูปภาพในองค์ประกอบ แต่ดูเหมือนจะไม่ได้ผล ฉันได้รับ "นิพจน์ไม่ถูกต้อง Generated function body: {backgroundImage: {url (image)}" เอกสารกล่าวว่าจะใช้อย่างใดอย่างหนึ่ง 'Kebab กรณี' หรือ 'อูฐกรณี' <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div> นี่คือซอ: https://jsfiddle.net/0dw9923f/2/

93 javascript  html  css  vue.js 

ฉันกำลังดิ้นรนเพื่อทำความเข้าใจวิธีการส่งข้อมูลระหว่างส่วนประกอบใน vue.js ฉันอ่านเอกสารหลายครั้งและดูคำถามและแบบฝึกหัดที่เกี่ยวข้องกับ vue มากมาย แต่ฉันก็ยังไม่เข้าใจ ฉันหวังว่าจะได้รับความช่วยเหลือในการทำตัวอย่างง่ายๆ แสดงรายชื่อผู้ใช้ในองค์ประกอบเดียว (เสร็จสิ้น) ส่งข้อมูลผู้ใช้ไปยังส่วนประกอบใหม่เมื่อคลิกลิงก์ (เสร็จสิ้น) - ดูการอัปเดตที่ด้านล่าง แก้ไขข้อมูลผู้ใช้และส่งกลับไปยังองค์ประกอบดั้งเดิม (ยังไม่ได้รับข้อมูลนี้) นี่คือซอซึ่งล้มเหลวในขั้นตอนที่สอง: https://jsfiddle.net/retrogradeMT/d1a8hps0/ ฉันเข้าใจว่าฉันต้องใช้อุปกรณ์ประกอบฉากเพื่อส่งผ่านข้อมูลไปยังส่วนประกอบใหม่ แต่ฉันไม่แน่ใจว่าจะทำงานอย่างไร ฉันจะผูกข้อมูลกับส่วนประกอบใหม่ได้อย่างไร HTML: <div id="page-content"> <router-view></router-view> </div> <template id="userBlock" > <ul> <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a> </li> </ul> </template> <template id="newtemp" :name ="{{user.name}}"> <form> …

92 javascript  vue.js 

ฉันเป็นมือใหม่กับ Vue.js และฉันกำลังพยายามสร้างแอปที่ให้ความสำคัญกับงานประจำวันของฉันและฉันพบกับ Vue Components ด้านล่างนี้คือสิ่งที่ฉันได้ลอง แต่น่าเสียดายที่ทำให้ฉันมีข้อผิดพลาดนี้: vue.js: 1023 [Vue warn]: Unknown element: - คุณลงทะเบียนคอมโพเนนต์ถูกต้องหรือไม่? สำหรับส่วนประกอบแบบวนซ้ำตรวจสอบให้แน่ใจว่าได้ระบุตัวเลือก "ชื่อ" ความคิดใด ๆ โปรดช่วย? new Vue({ el : '#app', data : { tasks : [ { name : "task 1", completed : false}, { name : "task 2", completed : false}, { name : …

91 javascript  vue.js 

ฉันจะเข้าถึง$refsภายในคอมพิวเตอร์ได้อย่างไร จะไม่ได้กำหนดไว้เสมอในครั้งแรกที่เรียกใช้คุณสมบัติที่คำนวณ

87 vue.js 

ฉันสร้างโปรเจ็กต์ด้วย vue-cli 4.1.1 และหลังจากรันการบริการเส้นด้ายฉันได้รับข้อผิดพลาดดังต่อไปนี้ Error: [BABEL] C:\dev\vuestudy\src\main.js: Cannot find module './src/data' (While processing: "C:\\dev\\vuestudy\\node_modules\\@vue\\cli-plugin-babel\\preset.js") มีคำแนะนำเกี่ยวกับเรื่องนี้ไหม? ขอบคุณล่วงหน้า. UPDATE: Kousha และ Dave นั้นถูกต้องหลังจากรอการอัปเดตแพ็คเกจ core-js ฉันได้สร้างโครงการใหม่และตอนนี้ก็ใช้งานได้

18 vue.js  babel 

ฉันใช้ VueJS กับเฟรมเวิร์กVuetifyJS (v2.0.19) ฉันได้รับข้อผิดพลาดนี้หลังจากใช้งานnpm ให้บริการ : Sass Loader ได้รับการเตรียมใช้งานโดยใช้วัตถุตัวเลือกที่ไม่ตรงกับสคี API สิ่งที่ฉันพยายาม: ฉันลบโฟลเดอร์node_modulesและติดตั้งใหม่ / อัพเดตแพ็กเกจ npm และ node.js ทั้งหมดเป็นเวอร์ชันเสถียรล่าสุด ข้อความแสดงข้อผิดพลาดเต็ม: error in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options …

17 node.js  vue.js  npm  sass  node-modules 

ฉันมีปัญหาอย่างมากในการทำให้ polyfills ทำงานใน Edge ฉันพยายามติดตามเอกสารด้วยความพยายามต่าง ๆ ทั้งหมดไม่ทำงาน ดูเหมือนจะเป็นสัญญาในที่สุดโดยเฉพาะที่ไม่ทำงาน สิ่งนี้เกิดขึ้นในโมดูล vuexดังนั้นฉันจึงลองเพิ่ม vuex ลงใน transpileDependencies ใน vue.config แต่ไม่มีโชค babel.config.js ของฉัน: module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; ใน main.js ของฉันฉันมีการนำเข้าสองรายการต่อไปนี้ในลำดับต้น ๆ : import 'core-js/stable'; import 'regenerator-runtime/runtime'; vue.config.js ของฉัน // eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); const isProd = process.env.NODE_ENV …

15 javascript  vue.js  vuejs2  babel  polyfills 

ฉันกำลังทำงานกับตาราง HTML และพิมพ์ตารางนั้นไปยังเครื่องพิมพ์ที่ใช้html-to-paperใน vue.js สิ่งที่ฉันกำลังทำอยู่คือการคลิกเพิ่มการสร้างแถวใหม่จากนั้นเมื่อคลิกการพิมพ์ฉันกำลังพยายามพิมพ์ตาราง แต่ไม่ได้ถ่าย ข้อมูลใด ๆ แสดงเซลล์ว่างเท่านั้น รหัสแอป <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> …

14 javascript  css  vue.js  printing  vuejs2 

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11): 139:11 Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'RequireFunction'. Named property 'cache' of types 'Require' and 'RequireFunction' are not identical. 137 | 138 | // For backwards compability > 139 | interface NodeRequire extends NodeJS.Require {} | ^ 140 | interface RequireResolve extends NodeJS.RequireResolve {} 141 …

12 typescript  vue.js  webpack 

ฉันมีลำดับต่อไปนี้เกิดขึ้น: หน้าจอหลัก กำลังโหลดหน้าจอ หน้าจอผลลัพธ์ ในหน้าแรกเมื่อมีคนคลิกปุ่มฉันจะส่งพวกเขาไปยังหน้าจอโหลดผ่าน: this.$router.push({path: "/loading"}); และเมื่องานของพวกเขาเสร็จสิ้นพวกเขาจะถูกส่งไปยังหน้าจอผลลัพธ์ผ่านทาง this.$router.push({path: "/results/xxxx"}); ปัญหาคือพวกเขามักจะต้องการจากผลลัพธ์กลับไปที่หน้าจอหลัก แต่เมื่อพวกเขาคลิกกลับพวกเขาจะถูกส่งไปโหลดอีกครั้งซึ่งจะส่งพวกเขากลับไปที่ผลลัพธ์ดังนั้นพวกเขาจึงติดอยู่ในวงวนไม่สิ้นสุดและไม่สามารถไปได้ กลับไปที่หน้าจอหลัก แนวคิดใดที่จะแก้ไขปัญหานี้ ฉันชอบถ้ามีตัวเลือกเช่น: this.$router.push({path: "/loading", addToHistory: false}); ซึ่งจะส่งไปยังเส้นทางโดยไม่ต้องเพิ่มลงในประวัติ

12 javascript  vue.js  vue-router 

ใช้ Ubuntu Linux พร้อมติดตั้ง docker ไม่มี VM ฉันสร้างภาพนักเทียบท่าด้วยแอปพลิเคชั่น vuejs ในการเปิดใช้งาน hot reload ฉันเริ่มคอนเทนเนอร์ docker ด้วย: docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image localhost:8081มันเริ่มต้นขึ้นที่ดีและผมสามารถเข้าถึงได้จากเบราว์เซอร์บนโฮสต์ของฉัน แต่เมื่อฉันทำการเปลี่ยนแปลงไฟล์ต้นฉบับและบันทึกการเปลี่ยนแปลงเหล่านั้นพวกเขาจะไม่ปรากฏในเบราว์เซอร์ของฉันก่อนที่ฉันจะกด F5 (hot reload ไม่ทำงาน) รายละเอียดบางอย่างด้านล่าง: package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", สร้าง …

10 docker  vue.js  webpack-dev-server