<v-card>
<v-card-title>Выберите модель</v-card-title>
<v-btn-toggle class="mb-10" v-model="currentButton">
<v-btn color="#546E7A" :key="btn.id" v-for="btn in btnModelInfo">{{btn.name}}</v-btn>
</v-btn-toggle>
<!-- Здесь должно менять изображение в зависимости от выбранного цвета-->
<v-btn-toggle>
<v-btn :color="color" :key="name" v-for="[name, color] in currentColors" @click="changeColor(name)"></v-btn>
</v-btn-toggle>
</v-card>{
data() {
return {
btnModelInfo: [
{id: '1', name: 'model_1' , colors: ['white', 'blue', 'red']},
{id: '2', name: 'model_2' , colors: ['red', 'green', 'blue']},
],
allColors: {
white: '#ffffff',
blue: "#0000ff ",
red: '#ff0000',
green: '#00ff00',
},
currentButton: null
}
},
computed: {
currentColors() {
return this.currentButton === null ? [] : this.btnModelInfo[this.currentButton]
.colors
.map(name => [name, this.allColors[name]]);
}
},
methods: {
changeColor(color) {
//Здесь должно менять изображение в зависимости от выбранного цвета
}
}
}methods: {
async generatePDF() {
const html2pdfd = await import("html2pdf" /*webpackChunkName:"html2Pdf"*/);
html2pdfd()
},
...
}methods: {
generatePDF() {
import("html2pdf" /*webpackChunkName:"html2Pdf"*/).than(html2pdfd => {
html2pdfd()
})
},
...
}id - уникальный идентификатор, он должен быть в одном экземпляре.<div id="container">
<input v-for="input in inputs" v-model="input.value" :name="input.name" type="hidden" >
</div>data: {
inputs: [
{
name: 'k1',
value: ""
},
{
name: 'k2',
value: ""
}
]
}inputs.
asyncData как и много другое в nuxt - это просто абстракции, призванные скрыть разницу меж SSR и обычной работой SPA.
axios.interceptors.request.use(async config => {
const token = await getToken(); // тут либо отдаём живой токен сразу, либо получаем новый
config.headers.Authorization = 'Bearer ' + token;
return config;
});menu есть в спеке html, хоть и deprecated вроде, а так - тебе ничто не мешает юзать незарезервированные названия.Vue.config.isReservedTag = function(isReservedTag){
const allowedTags = ['menu'];
return function(tag) {
if(allowedTags.includes(tag)) return false;
return isReservedTag.call(this, tag);
}
}(Vue.config.isReservedTag);'vue' у вас, очевидно, лежит не Vue. Я предположу, что у вас в vue.config.js прописан алиас vue: что-то.import * as all from 'vue'
console.log(all)watch - это внутренняя особенность Vue, и работает она только на реактивных свойствах. const cookies = Vue.observable({});
(function update(prevString) {
const cookieString = document.cookie;
if (prevString !== cookieString) {
const cookieObject = Object.fromEntries(
cookieString.split(/; */)
.map(
c => c
.split('=', 2)
.map(decodeURIComponent)
)
);
for (const [name, value] of Object.entries(cookies)) {
if (name in cookieObject) {
if (cookieObject[name] === value)
delete cookieObject[name];
} else {
Vue.delete(cookies, name);
}
}
for (const [name, value] of Object.entries(cookieObject)) {
Vue.set(cookies, name, value);
}
}
setTimeout(update, 100, cookieString);
}());
Vue.util.defineReactive(Vue.prototype, '$cookies', cookies);this.$watch('$cookies.cookie_name', () => {...}) this.$cookies.cookie_name = 'cookie_value' - тут уж самостоятельно)
require, очевидно, исполняется* во время создания(декларации) экспортируемого объекта, задолго до того как этот объект попадёт в Vue и превратится в Vue-компонент.require, очевидно, исполняется в глобальном контексте, в котором недоступен (какой-либо) this.<template>
<div>
<component :is="SvgView" class="sp-svg-styles"/>
</div>
</template>
<script>
export default{
props:['name'],
computed: {
SvgView() {
return require('./../Icons/'+this.name+'.svg');
}
}
}
</script>require на самом деле работает на этапе компиляции, подготавливая и загружая в бандл все файлы по маске ./../Icons/*.svg, а на этапе исполнения заменяется внутренней функцией, возвращающей значение по имени.
update, а родитель его поймал и что-то сделал.provide, дети делают inject и таким образом держат общий набор данных\методов.ref тоже можно, но тут следует продумать архитектуру с публичными и внутренними методами, чтоб поддержка не превратилась в ад.