Популярные вопросы по тегу VUE.JS
Динамическое изменение классов CSS с помощью vue js
... 2 {% end if %} "> <th class="sorting_asc" v-for="col in columns" v-if="col.label == sortKey"> <th class="sorting" v-for="col in columns" v-else> Итак, моя первая проблема 5 в том, что я не могу добиться чего- ...
[Vue warn]: свойство или метод не определены в экземпляре, но на них ссылаются во время рендеринга.
... </ul>", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) { data.settingsSelected = data.settings[index]; } } }); В приведенном выше коде при нажатии кнопки 6 возникает ошибка, указанная ниже. [Предупреждение 5 Vue]: с ...
Динамическое добавление различных компонентов во Vue
... this.fields.push({type: 'text', placeholder: 'Textbox ' + (++this.count)}); } } }) Но что, если 11 существует более одного типа полей формы 10 (ввод, файл, выбор и т. д.)? Я подумал, может 9 быть, создать отдельный компонент для каждого 8 типа, но как тогда мне показать несколько 7 типов компонентов в одном списке элементов 6 формы? Могу ли я создать компонент с дочерними 5 компонентами разных типов на основе данных 4 в массиве fiel ...
Какой способ лучше создать компонент vue (экспорт по умолчанию vs defineComponent vs новый Vue)
... ue 3 должны 7 ли мы использовать экспорт по умолчанию 6 для создания компонента или экспортировать 5 по умолчанию defineComponent или новый Vue 4 ({ Итак, как выбрать правильный способ создания 3 компонента прил ...
Как перезагрузить / обновить веб-страницу в Vue.js после определенного события или нажатия кнопки?
... Примечание. Я не хочу 5 выполнять автоматическое обновление через 4 определенный промежуток времени. Вместо 3 этого только один раз после каждого нажатия 2 этой кнопки на веб-странице. Буду признателен 1 за любую предоставленную ...
Как передать имя динамической функции событию щелчка во Vue Js
... имя функции из параметров? что-то 4 вроде этого .. <tr v-for="item in items" class="static" v-bind:class="{'evenRow': ite ...
В чем разница между Vuex и Event Bus?
... нять принцип связи между компонентами, и 6 возникло сомнение: в чем основное различие 5 между стратегией шины событий Vue и Vuex 4 для взаимодей ...
Vue2 перейдите к внешнему URL-адресу с помощью location.href
... и на «www.mytargeturl.org», используя 5 router.go, router.push, router.replace и 4 window.location.href, чтобы перенаправить 3 мое приложение vuejs, но всегда получаю 2 myVueapp.com/www.mytargeturl. org Вот мой 1 маршрут: routes:[ {path: '/', component ...
Как передать вводимый текст с помощью v-on: change в мой метод vue?
... вы посоветовать, как 2 я могу это сделать? Я все еще новичок в 1 vue. HTML: <input type="text" class="form-control" placeholder="Email*" v-model="form.email" v-validate="'required|email'" v-on:change="checkExist"> ЭЛЕМЕНТ VUE: Vue.component('button-counter', { data: function () { ...
Как я могу установить значение параметра по умолчанию в функции метода Vue.js?
... по умолчанию для функции в одном из моих 2 методов компонента, например: methods: { myFuntion(isAction = false) {} } Но при ...
Как установить свойства данных в значение, возвращаемое из геттера Vuex
... ol" id="address1" placeholder="" v-model="address" name="address" > <input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" > VUE data: function() { return { name: this.currentArea.title, address: this.currentArea.address, city: this.currentArea.city, state: this.currentArea.state } }, co ...
Добавить глобальную переменную в Vue.js 3
... переменную в Vue 3? в Vue 2 мы используем 1 это в файле main.js: Vue.prototype.$myGlobalVaria ...
Редактирование формы с опциями сохранения и отмены
... <button @click="isEditing = !isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> <button v-if="isEditing" @click="isEditing = false">Cancel</button> </div> </template> <script> var app = new Vue({ el: '#app ...
Как я могу получить параметры запроса из URL-адреса в Vue.js?
... метры запроса в Vue.js? Например, http://somesite.com?test=yay. Не 3 ...
vuejs обновляет родительские данные из дочернего компонента
... один экземпляр Vue с данными. На 8 этой странице я зарегистрировался и добавил 7 компонент в html. Компонент имеет один input[type=text]. Я 6 хочу, чтобы это значение отражалось на родительском 5 элементе (основном экземпляре Vue). Как правильно ...
Параметры ошибки Sass-loader имеют неизвестное свойство indentedSyntax при обновлении Vuetify с 1.5 до 2
... 7 выглядят примерно так: error in ./node_modules/vuetify/src/components/VGrid/_grid.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 has an unknown property 'indentedSyntax'. These properties ...
Как использовать маску в текстовом поле vuetify?
... ь свойство маски компонента 6 текстового поля, как в примере ниже. В представлении 5 это работает как чудо, но при отправке формы 4 формат маски не сохраняет значение. Например, когда 3 я набираю «000.000. ...
Vue: общие данные между разными страницами
... "" }, methods: { goToPageB: function() { if (some condition is met) { window.location.href="pageB.html"; sharedData = 1234; <------- I want to access sharedData in page B as well ...
Как передать URL-адрес динамического изображения в проекте Nuxt
... t;!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png --> <img :src="imgUrl" /> <img :attr="{src: imgUrl}" /> <script> export default { name: "ThumbNail", props: { imgUrl: { type: String, default: '' } } } </scrip ...
Vue: не удается получить доступ к магазину Pinia до входа в vue-router
... делать проверку прямо в конфигурации 4 маршрута в методе маршрута beforeEnter. Однако 3 у меня нет доступа к магазину Pinia, который, похоже, еще 2 не инициализирован, хотя он вызывается ранее 1 в main.js. Журнал консоли Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in product ...
Ошибка Axios catch Ошибка запроса с кодом состояния 404
... oreEach(() => { global.requestAnimationFrame = setImmediate, mock = new MockAdapter(axios) wrapper = shallowMount(Login, { router, $: jQuery, attachToDocument: true, mocks: { $t: () => { }, Raven: Raven, }, data() { return { ...
Ошибка в Vue3 - аргумент типа 'typeof import ("../ dist / vue")' не может быть назначен параметру типа 'PublicAPIComponent'
... я открываю main.ts, я получаю 2 ошибку машинописного текста: Argument of type 'typeof import("c:/../vue-app/node_modules/vue/dist/vue")' is not ass ...
NPM run dev не компилирует активы с уведомлениями об ошибках для пользователя, отключены в Windows 10
... 4 идентификатор приложения установлен правильно. Я 3 попытался переустановить и установить Laravel 2 7, но проблема не исчезла. ОС: Windows 10, сборка 1 версии 10240. Скриншот сообщения после запуска npm-run wat ...
Передать метод от родительского компонента к дочернему компоненту в vuejs
... как опору ... Фрагмент моего родительского 2 компонента: methods: { test: function () { console.log('from test method') } } <template> <child-component test="test" ...
Как использовать Vue 3 и добавить плагин Boostrap-vue?
... bootstrap.min.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; Vue.use(BootstrapVue); Вывод предупреждений: предупреждение 7 в ./src/plugins/bootstrap-vue.js "экспорт 6 по умолчанию" (импортированный как Vue) не 5 найден в vue предупреждение в ./node_modules/bootstrap-vue/esm/utils/vue.js "экспорт 4 по умолчанию" (импортированный как Vue) не 3 найден в vue Что в этом плохого? И как мне 2 использовать vue 3 для добавле ...
Получение параметров маршрутизатора в действиях Vuex
... T_TYPE, payload) }, Или вот так edit_sport_type({ state, commit, getters }, event) { const payload = {sportName, getters.getSportName} <------- commit(types.EDIT_SPORT_TYPE, payload) }, Или еще хуже: получение 5 параметров из свойств компонентов и передача 4 их в диспетчеризацию для каждой диспетчеризации. Есть 3 ли способ абстрагироваться от большого набора 2 действий? Или, возможно, альте ...
Добавить JQuery в Vue-Cli 3
... t webpack = require('webpack') module.exports { ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery' }) ] ... } Оба варианта 7 не работают. С # 1 ничего не происходит, с 6 # 2 я получаю ошибку компиляции; "плагины" не 5 разрешены или "ProvidePlugin" не разрешен 4 и когда я пытаюсь импортировать jQuery ...
Как вызвать функцию при нажатии значка добавления в Vuetify.js?
... добавить append-icon-cb="clearSearch()", но это не работает, и я не знаю почему. Я также пробовал просто использовать clearable, он очищает ввод, но все элементы остаются «отфильтрованными». Я не знаю, как работает clearable, но мой м ...
Как использовать 2 экземпляра Axios с разными baseURL в одном приложении (vue.js)
... ponse.status) }) }) } } export default trainingAPI Вот моя служба новостей: import axiosGoogleNewsAPI from 'axios' axiosGoogleNewsAPI.defaults.baseURL = 'https://newsapi.org' const googleNewsAPI = { getPosts (newsId) { return new Promise((resolve, reject) => { axiosGoogleNewsAPI.get(`/v2/everything?q=${newsId}&sortBy=publishedAt&apiKey=***********`) .then(response = ...
Как отрендерить массив для выбора опции vue.js
... ;,"select3":"Select 3"} Я хочу отобразить 2 этот массив в списке option. Я пробовал во ...
Реквизиты компонента Vuejs в виде строки
... типа для опоры «аватар». Ожидаемая строка, не 1 определено. Как передать "pictures" в виде строки? Vue.component('list-view', { props: { avatar: { type: String, required: true }, }, template: `<div>{{ avatar }}</div>`, }); var app = new Vue({ el: '#app' }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">& ...
Динамическое построение таблицы с использованием таблицы данных vuetifyJS
... ctions class="elevation-1" > <template slot="items" slot-scope="props"> **<td>{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.calories }}</td> <td class="text-xs-right">{{ props.item.fat }}</td> <td class="text-xs-right">{{ prop ...
Совместное использование общего CSS для компонентов VueJS
... лать еще кое-что 11 - также переместить scoped style в миксины. На данный 10 момент стиль заключен в тег <style lang="scss" scoped></style>, и этот стиль 9 очень хорошо работает с его компонентом, но 8 мне нужно продублировать коды стиля во всех 7 трех компонентах. Я знаю, что могу добавить 6 эти стили в глобальный файл css, но мне 5 не нужны некоторые стили в глобальной области, для 4 них буде ...
Как передать логические значения из Blade в Vue Component Laravel 7?
... true / false или 1/0, в 5 обоих методах на странице я могу получить 4 1/0 или true / false с dd ($ isExamAssigned) ): dd($isExamAssigned); // here I'm able to get 1 or 0 blade.php: <quiz-component :isExamAssigned = "{{$isExamAssigned}}" > </quiz-component> часть 3 кода из Component.vue: props:['isExamAssigned'], data(){ return{ isExamAssigned :this.isExamAssigne ...
Ошибка синтаксического анализа модуля webpack Неожиданный символ '@'
... "file-loader": "^0.9.0", "style-loader": "^0.13.1", "vue-loader": "^9.7.0", "webpack": "^2.1.0-beta.25", "webpack-dev-server": "^2.1.0-beta.0" } } и настроил 1 css в webpack.config.js var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { ...
Перенаправление Vue-router на странице не найдено (404)
... (transition) { if (transition.to.path === '/*') { window.location.href = '/404.html' } else { transition.next() } }); Это не перенаправление на страницу 9 404.html, когда вставлен несуществующий маршрут, а 8 просто дает мне пустой фрагмент. Только 7 при жестком кодировании some-site.com/* он 6 будет перенаправлен на ожидаемый some-site.com/404.html Я 5 уверен, что здесь есть что-то очень очевидное, что ...
Предупреждение о производительности vue3 с использованием ссылки
... бъектом. Это может приводят 3 к ненужным накладным расходам, и их следует 2 избегать маркировка компонента markRaw или использование 1 shallowRef вместо ref. <template> <component v-for="(el, idx) in elements" :key="idx" :data="el" :is="el.component" /> </template> s ...
Как создать потрясающую кнопку в vuetify?
... у страницы 2 в vuetify. У меня есть это <v-btn fab dark large color="primary"> <v-icon dark>add</v-icon> ...
Как запускать метод vue только один раз, а не каждый раз
... ) { this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY) } } } </script> Сейчас второй 3 this.rotate запускается на каждом change. К ...
VueJS - проверка требований к размеру файла при загрузке файла формы
... е файлы. Я видел решение this, но похоже, что 2 оно включает какой-то сторонний плагин. Я 1 предпочитаю решение, ко ...
Vue JS возвращает данные [__ob__: Observer] вместо моего массива объектов
... .id }}</h3> </div> </div> </template> <script> export default { data(){ return{ pigeons: [], pigeon: { id: '', sex: '', ...
Vue.js - Что такое самомодификатор
... х из них, кроме модификатора 5 self. Что такое модификатор self? Похоже, что модификатор 4 stop делает то же самое, что и self. Когда мне использовать 3 self? Спасибо за любую помощь. Я чувствую, ч ...
Загрузка SVG vue-svg-loader; [Предупреждение Vue]: недопустимое определение компонента
... loader: 'vue-svg-loader', }, ], } } }; 3) Импортировать 3 SVG и вставить как компонент import Logout from '@/assets/img/icons/logout.svg'; export default { components: { Logout, }, ... } 4) Используйте 2 его в шаблоне (vuetify как UI-Framework) <v-btn icon @ ...
Создание компонента динамической таблицы Vue JS
... , 'created_date'] Я хочу создать таблицу, как 3 показано ниже <table class="table"> <thead> <tr> <th v-for="(column, index) in columns" :key="index"> {{column}}</th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="index"> <td v-for="(colum ...
Ошибка дублирования навигации при замене маршрута на Vue-Router
... true" :auto-size="true" > <GridItem v-for="component in components" :key="component.i" :x="component.x" :y="component.y" :w="component.w" :h="component.h&q ...
Как отображать компоненты карты в цикле с системой сетки Vuetify?
... ex" v-for="company of companies" :key="company.name"> <v-layout > <v-flex md6 lg6> <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo"> </v-flex> <v-flex md6 lg6> <v-card-title class="headline pl-0">{{company.name}}</v-card-tit ...
Остановить несколько кликов vue.js
... uttonText: "Ja, verwijder deze rit.", closeOnConfirm: false }, () => { RideService.destroy(this.ride) .then(() => { swal({ title: "Rit succesvol verwijderd", type: "success", showCancelButton: false, timer: 2000, showConfirmButton: false }); this.pro ...
Как Computed работает в настройке скрипта Vue 3?
... ct.componentUpdateFn [as fn] (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30019:57) at ReactiveEffect.run (app.js?id=d9e007128724c77a8d69ec76c6c081a0:23830:29) at setupRenderEffect (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30145:9) at mountComponent (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29928:9) at processComponent (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29886:17) at patch (app.js?id=d9e007128724c ...
Vuex 2.0 Dispatch против фиксации
... объяснить, когда вы будете 4 использовать отправку вместо фиксации? Я 3 понимаю, что фиксация з ...
Как установить URL-адрес в vue для API внешнего бэкенда и API сервера разработчика
... { proxy: { '/api': { target: 'http://127.0.0.1:1337', ws: true, changeOrigin: true }, } }, Я 10 мог бы создать сервис из axios и импортировать 9 его через api: import axios from 'axios'; const client = axios.create({ baseURL: 'https://api.domain.com.br' }); export default client; Но тогда он не будет работать 8 с прокси-сервером разр ...