vueJS [Vue公司提醒]：在計算財產「標題」是在數據中已經定義

<script> 
import alertStore from '../stores/alert'; 
Vue.component('alert', require('vue-strap').alert); 

export default { 
    data() { 
     return { 
      show: alertStore.state.show, 
      title: alertStore.state.title, 
      msg: alertStore.state.msg, 
      type: alertStore.state.type 
     } 
    }, 
    created() { 
    }, 
    computed: { 
     title() { 

      return alertStore.state.title; 
     }, 
     msg() { 
      return alertStore.state.msg; 
     }, 
     type() { 
      return alertStore.state.type; 
     }, 
     show() { 
      return alertStore.state.show; 
     }, 
     duration() { 
      return alertStore.state.duration; 
     } 
    }, 
    methods: { 
     dismissAlert: function() { 
      this.$store.dispatch('dismissAlert', {title: '...'}); 
     }, 
    } 
}

如何在Vue公司的命名空間的工作？數據鍵，計算的返回對象鍵和所有組件對象鍵都將被添加到此實例中嗎？

所以如果我重寫這個。我得到一些錯誤，如：

[Vue警告]：計算屬性「title」已經在數據中定義。
[Vue警告]：已計算的屬性「show」已在數據中定義。
[Vue警告]：已計算的屬性「type」已在數據中定義。
[Vue警告]：已計算的屬性「msg」已在數據中定義。

我該如何解決這個問題。

在此先感謝。

來源

2017-09-06 abhishek jain

你是否真的需要使用計算屬性？或者你爲什麼在「數據」和「計算」中定義組件的成員？ – chrigu

實際上這個代碼是由另一個開發人員完成的，我是vuejs的新手。我已閱讀vueJS教程，但沒有找到任何解決方案爲什麼添加數據對象的數據。如果我從數據對象中刪除返回沒有錯誤來，仍然我的模板不顯示。 Vuejs開發工具顯示我計算加載：假任何想法我能做些什麼。 –

您的模板的郵政編碼。 – Pradeepb

<style lang="sass" scoped> 
    @import '../../sass/_variables.scss'; 
    .dismiss { 
     cursor: pointer; 
     position: absolute; 
     right: 0; 
     top: 0; 
     padding: 10px; 
     margin: 10px; 
    } 
    .alert { 
     width: 40%; 
     border-radius: 0; 
     border-width: 5px; 
     margin: 10px; 
     .row { 
      margin: 0; 
      .header { 
       font-size: 1.25em; 
       font-weight: 800; 
      } 
     } 
    } 
</style> 
<template> 
    <div> 
     <alert class='card' v-show="show" placement="top" :duration="duration" :type="type"> 
      <div class="row"> 
       <div class="header"> 
        {{ title }} 
       </div> 
       <div class='message'> 
        {{ msg }} 
       </div> 
      </div> 
      <div class="dismiss" title="Click to dismiss" @click="dismissAlert"> 
       <i class="fa fa-times" aria-hidden="true"></i> 
      </div> 
     </alert> 
    </div> 
</template> 
<script> 
    import alertStore from '../stores/alert'; 
    Vue.component('alert', require('vue-strap').alert); 

    export default { 
     data() { 
      return { 
       show: alertStore.state.show, 
       title: alertStore.state.title, 
       msg: alertStore.state.msg, 
       type: alertStore.state.type 
      } 
     }, 
     created() { 
     }, 
     computed: { 
      title() { 
       return alertStore.state.title; 
      }, 
      msg() { 
       return alertStore.state.msg; 
      }, 
      type() { 
       return alertStore.state.type; 
      }, 
      show() { 
       return alertStore.state.show; 
      }, 
      duration() { 
       return alertStore.state.duration; 
      } 
     }, 
     methods: { 
      dismissAlert: function() { 
       this.$store.dispatch('dismissAlert', {title: '...'}); 
      }, 
     } 
    } 
</script>

這是我的模板代碼

來源

2017-09-06 13:29:04

Vue的結合在數據的方法的所有屬性的實例的根。它也爲計算屬性和方法執行此操作，因此必須使用不同的名稱來避免命名衝突。

您發佈的代碼中存在的主要問題是您對每個數據屬性的命名衝突。事實上，因爲您使用的是Vuex存儲，所以根本不需要數據屬性，只需要計算屬性。

這也不是使用Vuex商店的最佳方式。一般建議是使用mapGetters作爲文件here。

來源

2017-12-21 19:06:04 nickford

vueJS [Vue公司提醒]：在計算財產 「標題」 是在數據中已經定義

回答

相關問題

vueJS [Vue公司提醒]：在計算財產「標題」是在數據中已經定義