I am trying to change the data depending on the value of my props in a Nuxtjs app.
export default {
props: {
moved: {
default: false,
type: Boolean,
}
},
data: function () {
if (!this.moved){
dataName: {
fill: "value1"
}
else dataName: {
fill: "value2"
}
return dataName
}
}
}
But I have an error message telling me that dataName is not defined. I don't know what I am doing wrong here...
You can make computed property instead:
Vue.component('Child', {
template: `
<div>
{{ dataName }}
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" :fill="dataName.fill"/>
</svg>
</div>
`,
props: {
moved: {
default: false,
type: Boolean,
}
},
computed: {
dataName() {
let mov = {}
this.moved ? mov.fill = 'blue' : mov.fill = 'red'
return mov
}
}
})
new Vue({
el: '#demo',
data() {
return {
moved: false
}
},
methods: {
changeMov() {
this.moved = !this.moved
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="changeMov">Change</button>
<Child :moved="moved" />
</div>