``
кладётся простой текст, а в this.showInfo
у тебя функция?<template>
? Потому что .vue - это не .js, это отдельный формат файла, использующий отдельный микроязык шаблонов, который компилируется в js.formatter: (params) => {
const span = document.createElement('span');
span.onclick = this.showInfo;
span.textContent = 'Ask Price';
return [
span,
document.createTextNode(`: ${params.value[0]}`),
document.createElement('br'),
document.createTextNode(`Duration: ${params.value[1]}`),
]
}
v-if=false
, на странице нет никаких элементов, делаем два - для data-toggle="tooltip"
элементов(которых нет) активируем возможность всплывашек, делаем три - v-if=true
появляется свежий элемент который ни о чём не подозревает.b-tooltip
в котором на mounted
активируйте ваш jquery.tooltip()
.<template>
<input
class="input border border-gray-400 appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
:value="name === null ? max_slippage : name"
@input="name = $event.target.value"
name="inputSlipage"
id="slipage"
type="text"
>
</template>
<script>
export default {
data() {
return {
max_slippage: null,
name: null
}
}
}
</script>
npm i
- установить зависимости(чтоб была папка node_modules
).npm
неизвестна - надо поставить Node.js (LTS версию), перезапустить терминал и повторить.scripts
в package.json
и запускаем то что похоже на нужное. Для vue
это обычно:npm run serve
- для разработки;npm run build
- для сборки.javascript
и работает он с файлами .js
. Ни о каких .vue
он знать не знает. Нельзя просто написать module
и ожидать что оно само заработает. loader
'ы, которые собственно и творят всю магию. Когда ты пишешь import componentName from './components/template.vue'
сборщик находит в конфиге специальный loader
для .vue
и запускает его, тот обрабатывает файл и выдаёт в результате валидный js
, который уже в свою очередь и импортируется. Вне сборщиков, в чистом браузере, поддержки loader
'ов само собой (пока?) нет. params
, кроме специального исключения для *
.slug
вам не очень нужен, то можно сделать так:{
path: '/product/*',
name: 'Product',
params: true,
component: () => import(/* webpackChunkName: "Category" */ '../views/ProductCard')
},
<router-link :to="{name:'Product', params: {pathMatch: item.url}}</router-link>
v-bind:
это то же самое что :
. А key
должен стоять на каждом итерируемом элементе. Уникальный для каждого элемента. Это очевидно, если понимать нахрена он вообще нужен(для обновления только тех кусков, что действительно обновились и сохранения тех, что не изменились).key
тебе нужен ещё и на label
.