Question

我正在处理一个项目组合项目，用户可以在其中上传图片，在图片下方提供说明，然后单击“添加”按钮添加其他图片和说明。

我正在尝试向描述输入中添加一个字符计数器，这是一个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前缀，一个:就足够了。我还删除了this.之前的portfolioItems，因为这也是不必要的。 Vue棉绒规则可以用来帮助检查这些东西。

有引入新组件的替代方法。您可以在模板中生成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>

然后，在item.remainChars的{{3}}事件中更新textarea，并内联显示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>

input

选项3：显示计算的文本

您可以在与portfolioItems相对应的单独数组中demo 2个字符计数标签：

<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>

compute

（Vue.js）V模型数组。运行困难

2 个答案:

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

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

选项3：显示计算的文本