Запитання з тегом «vue-component»

Компонент - це потужна функція Vue, яка дозволяє розширити основні елементи HTML для інкапсуляції багаторазового коду.

9
Vue.js - Як правильно слідкувати за вкладеними даними
Я намагаюся зрозуміти, як правильно слідкувати за певними варіаціями опори. У мене є батьківський компонент (.vue файли), який отримує дані від виклику ajax, поміщає дані всередину об'єкта і використовує їх для візуалізації дочірнього компонента через директиву v-for, нижче спрощення моєї реалізації: <template> <div> <player v-for="(item, key, index) in players" :item="item" …
13
Як слухати зміни «реквізиту»
У документах VueJs 2.0 я не можу знайти жодних гачків, які б слухали propsзміни. У VueJs такі гачки onPropsUpdated()чи подібні? Оновлення Як запропонував @wostex, я спробував watchвласність, але нічого не змінилося. Тоді я зрозумів, що у мене є особливий випадок: <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] …
7
Vue v-on: натискання не працює на компоненті
Я намагаюся використовувати директиву on click у компоненті, але це, здається, не працює. Коли я натискаю повідомлення про компоненти, трапляється, коли мені потрібно отримати "тест натиснутою" в консолі. Я не бачу помилок у консолі, тому я не знаю, що я роблю неправильно. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> …
13
vuejs оновити батьківські дані з дочірнього компонента
Я починаю грати з vuejs (2.0). Я побудував просту сторінку з одним компонентом на ній. На сторінці є один екземпляр Vue з даними. На цій сторінці я зареєстрував та додав компонент до html. Компонент має один input[type=text]. Я хочу, щоб це значення відображалося на батьківському (основний екземпляр Vue). Як правильно …
12
Як додати зовнішні скрипти JS до компонентів VueJS
Мені потрібно використовувати два зовнішніх сценарії для шлюзів платежів. Зараз обидва поміщені у index.htmlфайл. Однак я не хочу завантажувати ці файли на самому початку. Шлюз платежів потрібен лише тоді, коли користувач відкриває певний компонент ( using router-view). Чи все-таки можна цього досягти?
2
Значення за замовчуванням для реквізиту компонента Vue. Як перевірити, чи користувач не встановив опору?
1. Як я можу встановити значення за замовчуванням для опори компонента у Vue 2? Наприклад, є простий moviesкомпонент, який можна використовувати таким чином: <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } Але якщо користувач не вказав year: <movies></movies> тоді компонент прийме деяке значення за замовчуванням для yearопори. 2. …
4
Vue 'експорт за замовчуванням' проти 'новий Vue'
Я щойно встановив Vue і дотримуюся деяких навчальних посібників для створення проекту за допомогою шаблону веб-пакету vue-cli. Коли він створює компонент, я помічаю, що він пов'язує наші дані всередині наступного: export default { name: 'app', data: [] } Тоді як в інших навчальних посібниках я бачу, що дані пов'язані з: …
6
Зв'язок між компонентами братів і сестер у VueJs 2.0
Огляд У Vue.js 2.x model.syncбуде застарілим . Отже, що є правильним способом зв’язку між компонентами братів та сестер у Vue.js 2.x ? Фон Як я розумію Vue 2.x, кращим методом для передачі побратимів є використання магазину або шини подій . За словами Евана (творця Vue): Варто також згадати "передача даних …
4
Vuex - ім'я обчисленої властивості було призначено, але воно не має сеттера
У мене є компонент з деякою валідацією форми. Це багатоетапна форма оформлення замовлення. Код нижче - для першого кроку. Я хотів би підтвердити, що користувач вводив якийсь текст, зберігає його ім’я в глобальному стані, а потім надсилає на наступний крок. Я використовую vee-validate та vuex <template> <div> <div class='field'> <label …
4
Динамічний перехід реквізиту до динамічного компонента у VueJS
Я динамічний погляд: <div id="myview"> <div :is="currentComponent"></div> </div> із пов'язаним екземпляром Vue: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); Це дозволяє мені динамічно змінювати свій компонент. У моєму випадку, у мене є три різних компонента: myComponent, myComponent1і myComponent2. І я переключаюся між ними …
6
Як вирішити інтерполяцію всередині атрибутів, видалено. Використовувати 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 …
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) …
8
Як відформатувати валюти в компоненті Vue?
Мій компонент Vue такий: <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> Результатом {{ item.total }}є 26000000 Але я хочу, щоб форматування було …
8
Застосувати глобальну змінну до Vuejs
У мене є змінна javascript, яку я хочу передати глобально компонентам Vue після інстанціювання, отже, або кожен зареєстрований компонент має її як властивість, або до неї можна отримати глобальний доступ. Примітка :: Мені потрібно встановити цю глобальну змінну для vuejs як властивість ТІЛЬКИ ПРОЧИТАТИ
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.