Vuetify 2 x Vue.js 2 - 无法显示在文本字段中输入的预期值

Question

我有一个包含自动单词的文本字段。这意味着在文本字段中输入的任何字母或字符都将自动替换。

如在文本字段中看到的，您无法自由输入您喜欢的任何单词，因为它被替换为“这是自动单词。文本字段中的任何字母或字符类型都将被这句话替换。”

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      automaticWord: "This is automatic word. Any letters or character type in textfield will be replaced by this sentence.",
      userInput: [],
      displayInput: "",
      result: '',
    }
  },
  methods:{
    updateInput() {
      //Store any character inputted in textfield.
      this.userInput.push(this.displayInput)
      
      //Replace the any character inputted in textfield to automaticWord.
      this.displayInput = this.automaticWord.slice(0, this.displayInput.length);
    },
    showResult() {
      //Pass the complete word inputted in the textfield in result.
      this.result = this.userInput[this.userInput.length - 1].toString();
    },
  },
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>


<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-container fluid>
        <v-text-field
          label="Type here"
          v-model="displayInput"
          @input="updateInput"
        ></v-text-field>
        <v-btn color="primary" @click="showResult">Show</v-btn>
        <div class="ma-3">
            Result: <span class="text-h6 red--text">{{ result }}<span>
        </div>
    </v-container>
    </div>
  </v-app>
</div>

我的问题是，我无法从文本字段输入正确的值。 示例：

如果您在文本字段中输入“jump”，它会自动替换为来自automaticWord的“This”（显示在文本字段中）。现在，我想在单击“显示”按钮时显示输入的单词“jump”。但遗憾的是，结果是错误的，因为它显示的是“Thip”而不是“jump”。

我想知道我缺失的部分在哪里。 谢谢您的帮助。

Answer 1

在当前代码中，每次添加字符时，您都会通过复制

displayInput

中的

userInput

来覆盖用户输入。因此，仅保留最后一个用户输入的字符，之前的字符将被自动字替换。

为了解决这个问题，您可以使用

v-field

将其内容发送到事件回调的事实。通过这样做，您可以分别处理真实的用户输入和显示的值。无需使用

v-model

，只需使用

:value

属性并让您的回调完成工作。

除此之外，您可能还想处理文本粘贴或字符范围选择删除或替换。文本字段输入和自动单词之间的字符串差异就可以解决问题。最终，您可能希望截断任何超过自动单词长度的句子。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      automaticWord: "This is automatic word. Any letters or character type in textfield will be replaced by this sentence.",
      userInput: '',
      displayInput: "",
      result: '',
    }
  },
  methods:{
    updateInput(input) {
      console.log(input)
      // we'll make a diff from automaticWord to extract "real" user input
      // This will handle paste and character range deletion and/or replacement
      let updated = ''

      for(let i=0; i < input.length; i++) {
        // Automatic word length reached. Block further processing
        if(this.automaticWord.length < i) {
          break
        }
        
        // Added characters case
        if(this.userInput.length < i) {
          updated += input[i]
          continue
        }
        
        // Other cases
        if(input[i] === this.automaticWord[i]) {
          updated += this.userInput[i]
        } else {
          updated += input[i]
        }
      }

      this.userInput = updated
      
      // Replace the any character inputted in textfield to automaticWord.
      this.displayInput = this.automaticWord.slice(0, this.userInput.length);
    },
    showResult() {
      // Pass the complete word inputted in the textfield in result.
      this.result = this.userInput;
    },
  },
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>


<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-container fluid>
        <v-text-field
          label="Type here"
          :value="displayInput"
          @input="updateInput"
        ></v-text-field>
        <v-btn color="primary" @click="showResult">Show</v-btn>
        <div class="ma-3">
            Result: <span class="text-h6 red--text">{{ result }}<span>
        </div>
    </v-container>
    </div>
  </v-app>
</div>