從文本輸入字段執行 Vuejs _code

Question

我正在開發一個讓你一次重命名多個文件的東西，類似於 Mac OS 的做法。 如果可以在輸入字段中使用 Vue js 過濾器和東西，那將會很有用。

示例：用戶想要添加前綴並將名稱設為大寫，因此他在輸入中添加

FILE_{{ file.name.toUpperCase() }}

這可以使用Vue嗎？ 我的意思是以編程方式執行輸入字段的內容並生成一個替換變量的字符串？

Answer 1

呃有點難以回答，但如果我理解正確，計算屬性可以是一個解決方案。

<template>
  <div class="hello">
    <input type="text" v-model="inputValue">
    <p>Test: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      tagsToReplace: {
        "{tag1}": "krakrak",
        "{tag2}": "",
        "{something}": "somethingsomethingsomthing"
      }
    };
  },
  computed: {
    inputValue: {
      get() {
        return this.data;
      },
      set(newInputValue) {
        let entries = Object.entries(this.tagsToReplace);
        entries.forEach(
          item => (newInputValue = newInputValue.replace(item[0], item[1]))
        );
        this.data = newInputValue;
      }
    }
  }
};
</script>

試試這個組件。 基本上，當您在輸入中鍵入 {tag1} 時，它會自動更改為“krakrak”。 您可以在數據中定義其他標簽