Question

我正在对要传递给组件的道具进行一些非常繁重的数据操作。我在方法中执行此操作，经过一番阅读后，我了解到该方法不会更新组件，但计算得出的值会更新它。但是，当我将其放入计算机中时，会出现大量错误，提示“计算机属性中的意外副作用”。阅读后，我明白这是因为我正在对此进行任何更改。我觉得我的整个方法都不正确，我正试图破解自己的方法。任何指导我朝正确方向发展的技巧都将不胜感激。

在pages / index.vue

中

<input v-model.number="level" @change="buildScenario()" 
placehoder="Enter level">
<p>Please select scenario</p>
<select v-model="selected" @change="buildScenario()">
      <option v-for="(scenario) in 
      this.$store.state.scenarios.scenarioDefinitions"
        :key="scenario.name"
        :value="scenario"
        >
          {{ scenario.name }}
      </option>
      </select>
 <card-box v-if="monsterStats"
  :monsterStats="monsterStats">
 </card-box>

在单击场景后，我需要调整该场景的数据并将其传递到cardBox组件以呈现有关怪物的一些信息。我的数据非常粗糙。我显然没有在正确的地方这样做。在阅读了有关观察者的信息后，他们似乎也不适合这项工作。在pages / index.vue脚本标签中：

import cardBox from '../components/cardBox.vue'

export default {
 components: {
   'card-box': cardBox
 },
data: function() {
 return {
  selected: "Please select scenario",
  level: 1,
  scenarioDeckNames: [],
  scenarioDecks: [],
  monsterStats: {}
 }
},
methods: {

methods: {
 buildScenario() {
  this.scenarioDeckNames = this.selected.decks.map((obj) => obj.name)
  let decks = this.$store.state.decks.decks[0]
  this.scenarioDeckNames.forEach((name) => {
    if (name.startsWith("Boss:")) {
      this.scenarioDecks.push(decks["Boss"])
    } else {
      this.scenarioDecks.push(decks[name])
    }
  })
  this.buildMonsterStats()
 },
 buildMonsterStats() {
  this.selected.decks.forEach((deck) => {
    if (deck.name.startsWith("Boss:")) {
      this.monsterStats[deck.name.slice(6)] = this.$store.state.monsterStats.monsterStats[0].bosses[deck.name.slice(6)].level[this.level]
      Object.assign(this.monsterStats[deck.name.slice(6)], this.$store.state.deckDefinitions.deckDefinitions.find((obj) => obj.class === "Boss"))
    } else {
      this.monsterStats[deck.name] = this.$store.state.monsterStats.monsterStats[0].monsters[deck.name].level[this.level]
      let monsterClass = this.scenarioDecks.find((obj) => obj.name === deck.name)
      Object.assign(this.monsterStats[deck.name], this.$store.state.deckDefinitions.deckDefinitions.find((obj) => obj.class === monsterClass.class))
    }
  })
  console.log('monsterStats', this.monsterStats)
 }
}

在将dataLoaded bool添加到数据后，将卡箱上的v-if更改为dataLoaded，然后在buildMonsterStats（）的末尾将dataLoaded更改为true，我冲了一下澡，拿走了总金额，然后来到这里发布此内容。让我知道是否遗漏了任何信息。谢谢！

试图在Vue / Nuxt中更改道具（大量）时重新渲染组件？

0 个答案: