Vue Bootstrap字符串逗号与textarea分隔的数组？

Posted 2023-02-23

【中文标题】Vue Bootstrap字符串逗号与textarea分隔的数组？

【英文标题】：Vue Bootstrap Array of strings comma seperated from text area?

【发布时间】：2021-09-19 19:54:06

【问题描述】：

我需要从 vue bootstrap 中的文本区域中提取字符串并将它们保存到数组中。这些是数字和字母字符串，当有人昏迷时，它们分开。如果我们能做到这一点，那么它们就会在标签添加输入字段中显示为“药丸”或标签。阅读文档找不到任何专门针对此的内容，非常感谢您的帮助。

【问题讨论】：

javascript String split()

我是否使用 v-model 将它们保存到数组中？我真的很困惑，我知道我必须以某种方式使用拆分

【参考方案1】：

拆分应该不会太难，只需手动绑定输入并解析来自textarea的输出，并为每个适当的数据数组转换。

对于textarea的输入值：

将数组元素连接在一起，, 分隔每个元素 我们可以使用list.join(', ') 来完成此操作

对于textarea的输出值：

我们可以将处理程序绑定到Bootstrap-Vue's textarea 发出的事件之一，在这种情况下我使用update，因为这就是BV uses for v-model 该处理程序会将文本转换为我们的数组： 将字符串拆分为逗号数组：value.split(",") 修剪每个元素以删除前面/后面的空格：.map(item => item.trim()) 然后过滤掉任何空元素：.filter(item => item.length > 0)

此输入/输出逻辑将适当地将 textarea 的内容转换为数组，反之亦然。

至于药片，我不确定我在下面所做的是否正是您想要的，但我想我会试一试。

---

功能示例

new Vue(
  el: '#app',
  data() 
    return 
      listArr: ["test", "1", "2"],
    
  ,
  computed: 
    arrToText() 
      return this.listArr.join(', ');
    ,
  ,
  methods: 
    textToArr(value) 
      this.listArr = value.split(",")
        .map(item => item.trim())
        .filter(item => item.length > 0);
    ,
  ,
);

<!-- Set up Vue and Bootstrap-Vue for snippet -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /><script src="//unpkg.com/vue@2/dist/vue.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-textarea :value="arrToText" class="mb-2" @update="textToArr"></b-form-textarea>
  <h3>
    <b-badge v-for="(item, index) in listArr" :key="index" pill variant="primary" class="mr-2"> item </b-badge>
  </h3>
</div>