This question already has an answer here:
How to reference data from vue,js pug template?
(1 answer)
Closed last year.
How to correctly add dynamic attribute names in a Vue template using Pug? I'm using the following template:
<template lang="pug">
button(id=`button__${buttontype}`)
slot(name="text")
</template>
<script>
export default {
name: "Button",
data() {
return {
buttontype: "primary"
},
},
mounted() {
console.log(this.test); // This shows the value as 'primary'
},
};
</script>
The HTML element being generated is <button id="button__undefined"></button>
The value of buttontype is coming as undefined in the id attribute for some reason.
Try using v-bind:
<template lang="pug">
button(v-bind:id=`button__${buttontype}`)
slot(name="text")
</template>
The following template worked:
<template lang="pug">
button(:class="[`button__${test}`]")
slot(name="text")
</template>
Related
This question already has answers here:
How do I check if an array includes a value in JavaScript?
(60 answers)
Closed 7 months ago.
I get this error : "TypeError: _vm.in_array is not a function" when I use in_array() function.
Is there any similar function like in_array() in Vue.js?
I want to do something like this and the result should display abc.
<template v-if="in_array(number,list)">
<h3> abc </h3>
</template>
<script>
data() {
return {
list: [1,2,3],
}
},
</script>
in_array is not a function in JavaScript, you can use includes in a computed property to make this work tho.
Pseudocode:
<template v-if="in_array">
<h3> abc </h3>
</template>
<script>
data() {
return {
number: 1,
list: [1,2,3],
}
},
computed: {
in_array() {
return this.list.includes(this.number)
}
}
</script>
I have the following vue component
<template>
<CardGroup>
<template #headerRight>
<div>Total items: {{ this.total }}</div>
</template>
</CardGroup>
</template>
export default {
data() {
return {
total: 0
};
}
}
I don't understand the scoping problem. The this in the slot template is null and I cannot access the this.total data property. I can use that property outside the slot template though.
Why this is null inside the slot template?
Vue binds properties automatically, please go through it.
data binding
<div>Total items: {{ total }}</div>
Well, the solution was somewhat simple. I just had to omit this
<div>Total items: {{ total }}</div>
It turns out vue binds properties automatically to the _vm.
This question already has an answer here:
Creating local copy of passed props in child component in vue.js?
(1 answer)
Closed 2 years ago.
I made a demo to test an issue with my larger project, I am making a settings menu where I want to copy some props, edit them and save them. To do this I need to copy the props for local use. For some reason, the array wont copy properly and a $set will change the array for the parent function. See below.
Child Code below
<script>
export default {
name: "HelloWorld",
props: {
data: Object,
},
data: function(){
return{
localData : {}
}
},
mounted(){
this.localData = Object.assign({},this.data)
},
methods: {
changeData() {
console.log("changing parent data");
console.log(this.localData)
this.localData.name = "new name"
this.$set(this.localData.array, 0, 1000); //change first indes to 1000
},
},
};
</script>
<template>
<div class="child">
Child {{localData}}
<br />
<button #click="changeData()">Change Data</button>
</div>
</template>
Parent Code
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<p>Parent {{data}}</p>
<Child :data="data"/>
</div>
</template>
<script>
import Child from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
Child
},
data: function(){
return {
data: {'name':'hello world','array':[1,2,3,4]}
}
}
}
</script>
As the image shows, after the button is pressed, the name value remains local to the child copy of the object, however the array is not. How can the array be changed locally without the parent changing as well. Thanks
Try out to use the spread operator:
this.localData = {...this.data}
<b-checkbox v-model="selectedTiers" :native-value="i" type="checkType(i)" #input="update">
{{ $t('general.specificTier', { tier: i }) }}
</b-checkbox>
Hi everyone, I am using Buefy and Vue.js. I want the type to be flexible. That is why I am using the method here. according to different I, it outputs a different string. But type here doesn't recognize the method here. I also can't use string + string here.
Here is information about checkbox of buefy.
You can use v-bind directive to dynamically alter the attributes.
Here is an example to get your started:
<template>
<div id="app">
<!-- Example with string manipulation -->
<b-checkbox :type="`is-${type}`">TEST 1</b-checkbox>
<!-- Example by reading off compenent-data -->
<b-checkbox :type="checkboxType">TEST 2</b-checkbox>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
type: 'success',
checkboxType: "is-success"
};
}
};
</script>
One last thing, you can still use a method there (just add : before the attribute name - like :type="checkType(i)"), but the function would only be evaluated once and any further data changes won't be reflected on the type attribute (won't update on data change)
I'm trying to create a reusable table component that utilizes Vuetify's v-data-table component in order to group common aspects such as a search bar, table actions (refresh, create, etc.) and other features that all of my tables will have. However, I'm running into issues with implementing dynamic, scoped slots inside the table component to account for custom columns. Think of columns like actions, formatted ISO strings, etc.
Here's a simplified example of what I'm trying currently. In the example, I am passing the array customColumns to CustomDataTable.vue as a prop. customColumns has one element with two properties. The slotName property specifies the name of the slot that I'd like to reference in the parent component. The itemValue property specifies the header value that CustomDataTable.vue should override and replace with a scoped slot. The scoped slot is then used in the parent component to correctly format the date in the 'Created At' column.
Parent Component that is implementing the table component:
<template>
<custom-data-table
:items="items"
:headers="headers"
:customColumns="customColumns"
>
<template v-slot:custom-column="slotProps">
<span>{{ formatDate(slotProps.item.createdAt) }}</span>
</template>
</custom-data-table>
</template>
<script>
import CustomDataTableVue from '#/components/table/CustomDataTable.vue'
export default {
data: () => ({
items: [
{
id: 0,
createdAt: new Date().toISOString(),
...
},
...
],
headers: [
{
text: 'Created At',
value: 'createdAt',
sortable: true
},
...
],
customColumns: [
{
slotName: 'custom-column',
itemValue: 'createdAt'
}
]
})
}
</script>
CustomDataTable.vue
<template>
<v-data-table
:items="items"
:headers="headers"
>
<template v-for="column in customColumns" v-slot:item[column.itemValue]="{ item }">
<slot :name="column.slotName" :item="item"/>
</template>
</v-data-table>
</template>
<script>
export default {
name: 'custom-data-table',
props: {
items: {
type: Array,
required: true
},
headers: {
type: Array,
required: true
},
customColumns: {
type: Array
}
}
}
</script>
Is there a way to achieve this? The example does not override the column values and just displays the createdAt ISO string unformatted. I believe the problem might be coming from how I'm assigning the template's slot in CustomDataTable.vue, but I'm sure how else you could dynamically specify a template's slot. Any ideas?
I think the syntax for dynamic slots should be:
<template
v-for="column in customColumns"
v-slot:[`item.${column.itemValue}`]="{ item }"
>
<slot :name="column.slotName" :item="item"/>
</template>