(Vue.js) V 模型数组。有困难 运行 功能

Question

我正在处理一个投资组合项目，用户可以在其中上传图片，在图片下方提供描述，然后单击 "add" 按钮添加另一张图片和描述。

我正在尝试向描述输入添加一个字符计数器，这是一个 textarea 字段。通常我可以将 v-model 的名称添加到函数中，并且它工作正常，但是这个 textarea 在 for 循环中，所以我不确定如何得到它功能正常工作。

模板：

<div class="newPortfolioList">
    <div class="newPortfolioItem" v-for="(item, index) in this.portfolioItems" v-bind:key="index">
....
       <div class="newPortfolioDescription">
          <textarea v-model="item.portfolioDescription" @keyup='remaincharCount()' maxlength="1000" placeholder="Item Description..."></textarea>
       </div>

       <!--  Displaying the remaining characters -->
       <span style="text-align:left; padding: 10px;">{{ remaincharactersText }}</span>
    </div>
...         

脚本：

export default {
    data () {
        return {
            portfolioItems:[],
            maxcharacter: 1000,
            remaincharactersText: "1000 characters remaining"            
        }
    },
    methods: {
        createPortfolioItem () {
            this.portfolioItems.push({
                portfolioDescription: ''
            })
        },
        remaincharCount () {
            if (this.foo.length > this.maxcharacter) {
              this.remaincharactersText = "Exceeded "+this.maxcharacter+" characters limit.";
            } else {
              var remainCharacters = this.maxcharacter - this.foo.length;
              this.remaincharactersText = remainCharacters + " characters remaining";
            }
        }
    }
}

Answer 1

有多种方法可以做到这一点。

在这种情况下，我认为您最好的选择是引入一个新组件来表示单个投资组合项目。这些组件中的每一个都可以管理自己的消息。从他们的角度来看，没有循环可以考虑。

所以你的列表模板应该是这样的：

<div class="newPortfolioList">
    <my-new-portfolio-item
        v-for="(item, index) in portfolioItems"
        :key="index"
        :portfolio-item="item"
    />
</div>

两个旁注。我已经在您的密钥上删除了 v-bind 前缀，: 就足够了。我还删除了 portfolioItems 之前的 this.，因为这也是不必要的。 Vue linting 规则可用于帮助检查这些内容。

除了引入新组件之外，还有其他选择。您可以在模板中生成 remaincharactersText 的值，而不是将其保持在状态中。它仍然可以是方法调用，但不会预先计算。像这样：

<span style="text-align:left; padding: 10px;">{{ remaincharCount(item) }}</span>

另一种（甚至更痛苦）的替代方法是制作 remaincharactersText 一个值数组，然后通过索引获取相关值：

<span style="text-align:left; padding: 10px;">{{ remaincharactersText[index] }}</span>

但是，重申一下，为 v-for 中的项目引入一个单独的组件可能是最好的方法。

Answer 2

您应该知道文本区域已经将其 maxlength 设置为 1000，因此标签 Exceeded N characters limit 是不可能的（除非您检查小于 1000）。目前，标签总是显示 N reminaing characters.

选项 1：内联显示计数计算

您可以使用字符串插值显示内联计算，而不是存储字符数（不必要地占用额外内存）：

<template>
  <div>
    <textarea v-model="item.portfolioDescription" maxlength="1000"></textarea>
    <span>{{ 1000 - item.portfolioDescription.length }} remaining characters</span>
  </div>
</template>

demo 1

选项 2：显示项目变量的计数

如果您更喜欢存储字符数（例如，对于某些内部处理），您可以向项目数据添加一个新的 属性：

<script>
const MAXLEN = 1000

export default {
  methods: {
    createPortfolioItem() {
      this.portfolioItems.push({
        remainChars: MAXLEN, // <--
      })
    },
  }
}
</script>

然后，根据 textarea 的 input 事件更新 item.remainChars，并内联显示 item.remainChars。

<template>
  <div>
    <textarea v-model="item.portfolioDescription" maxlength="1000"
              @input="item.remainChars = 1000 - item.portfolioDescription.length">
    </textarea>
    <span>{{ item.remainChars }} remaining characters</span>
  </div>
</template>

demo 2

选项 3：显示计算文本

您可以 compute 单独数组中的 character-count 标签对应于 portfolioItems:

<script>
const MAXLEN = 1000

export default {
  computed: {
    remainingCharsText() {
      return this.portfolioItems.map(item => `${MAXLEN - item.portfolioDescription.length} remaining characters`)
    },
  }
}
</script>

然后，更新您的模板以通过 index:

引用此计算数组

<template>
  <div>
    <textarea v-model="item.portfolioDescription" maxlength="1000">
    </textarea>
    <span>{{ remainingCharsText[index] }}</span>
  </div>
</template>

demo 3