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

Posted 2023-02-22

【中文标题】(Vue.js) V 模型数组。运行困难功能

【英文标题】：(Vue.js) V-model array. Having difficulty running function

【发布时间】：2019-09-29 06:07:45

【问题描述】：

我正在处理一个作品集项目，用户可以在其中上传图片，在图片下方提供描述，然后单击“添加”按钮添加另一张图片和描述。

我正在尝试在描述输入中添加一个字符计数器，这是一个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";
            
        
    

【问题讨论】：

为什么不在 textarea: <textarea maxlength="1000"> 上使用 maxlength html 属性？您还可以使用像 Vee-validate 这样的库，它允许您检查您的验证规则并显示错误消息

【参考方案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 中的项目引入一个单独的组件可能是最好的方法。

【参考方案2】：

您应该知道 textarea 已经将其 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 将字符计数标签放在与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

【讨论】：

非常感谢您的帮助！这是完美的！我最终使用了第一个选项。再次感谢您！

@asdf123 没问题 :)