Блог

Главная - Вопросы по программированию - Обновление данных в соответствии со значением реквизита в файле Vue, возвращающее не определенное сообщение об ошибке

Обновление данных в соответствии со значением реквизита в файле Vue, возвращающее не определенное сообщение об ошибке

#javascript #vue.js #nuxt.js

Вопрос:

Я пытаюсь изменить данные в зависимости от значения моих реквизитов в приложении Nuxtjs.

 export default {
  props: {
    moved: {
      default: false,
      type: Boolean,
    }
  },
  data: function () {
    if (!this.moved){
        dataName: {
          fill: "value1"
        } 
    else dataName: {
          fill: "value2"
          } 
    return dataName
    }
  }
}

Но у меня есть сообщение об ошибке, сообщающее мне об этом dataName is not defined . Я не знаю, что я здесь делаю не так…

Ответ №1:

Вместо этого вы можете создать вычисляемое свойство:

 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>
Метки: ,