如何在Vue中将格式化的输入文本存储到带有索引的数组中？

Posted 2023-02-16

【中文标题】如何在Vue中将格式化的输入文本存储到带有索引的数组中？

【英文标题】：How to store formatted input text into an array with indexes in Vue?

【发布时间】：2021-08-06 06:47:29

【问题描述】：

这是这个问题Vue.js: Input formatting using computed property is not applying when typing quick的扩展

我被困在如何从我的文本输入中获取格式化值列表到数组列表中。 我需要在矩阵中执行此操作，但将其简化为数组。

请帮忙，谢谢！

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
   <div
      v-for="(input, index) in valueInputs" <-- index
      :key="index"
    >
      <input
        v-model="value"     // <-- I want to track what index I'm in
        @input="formatTime" // <-- so I can set it in an array later
        maxLength="4"       // I tried formatTime[index] or value[index]
        id="format-value" // but that doesn't work, how to pass index 
        class="input" // into formatTime or value fields?
        type="text"
      />
  </div>
</div>

data () 
  return 
  valueInputs: [],    // a list of inputs
  allFormatValues: [] // want to store all the formatted values here by the index
 

想要设置一个存储所有格式化值的数组：

   this.allFormatValues[index] = this.value;

我不确定如何将索引与格式化的字符串值相关联？

【参考方案1】：

您正在检索valueInputs 数组的值而不是它的索引。但是，您可以通过如下方式获取v-for 中每个值的索引：

v-for="(value, index) in valueInputs"

【讨论】：

啊我简化了代码，但是我已经在代码中v-for="(value, index) in valueInputs"。但问题是我无法将索引传递到输入标签 v-model="value" 或 @input="formatTime"

您可以将其作为参数传递给 formatTime 函数。 @input="formatTime(index)" 或 @input="formatTime(value, index)" 如果你在你的功能中需要两者。不过，请确保相应地更改 formatTime 代码。

谢谢，链接中的代码在我的情况下实际上不起作用。对不起，我想我不清楚。我必须使用手表才能从下面的链接中工作，所以我不知道如何在这里添加索引***.com/questions/67551738/…

valueInputs数组会被用户填写吗？

是的，用户可以添加更多天数并将其存储在那里