Estoy tratando de cambiar los datos según el valor de mis accesorios en una aplicación Nuxtjs.
export default { props: { moved: { default: false, type: Boolean, } }, data: function () { if (!this.moved){ dataName: { fill: "value1" } else dataName: { fill: "value2" } return dataName } } } Pero tengo un mensaje de error que me dice que dataName is not defined . No se que estoy haciendo mal aqui...
En su lugar, puede hacer una propiedad calculada:
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>