Question

我在页面的一侧有输入字段，然后将其显示在另一侧的框中，该框主动显示用户输入的内容，但以一种有组织的方式。我需要主动在输入字段中搜索特定的字符串，在这种情况下为“键”，然后它将立即更改为存储在数据中的值。我有一个searchkeyword（）函数，该函数应该遍历存储输入字段的对象数组，但尚未使它起作用。

例如，如果用户在input1中键入“ key this is david”，则它将“ key”更改为其存储的值“ hello”。如果用户单击其他选项，则键的值也会更改。真的不知道从这里去哪里，所以任何输入都可以帮助：）

var app = new Vue({
  el: '#app',
  data: {
    activeKeyword: 'HELLO',
    inputs: [
      {
        input1: 'oranges',
        input2: 'Online',
        input3: 'Free'
      }
     ]
    },
    methods: {
      searchKeyword() {
        for(var x = 0; x < this.ads.length; x++){
          for(var input in this.inputs[x]){
            if(this.ads[x] !== "boolean"){
              this.ads[x][input] = String(this.inputs[x][input]).replace(/_keyword_/g, this.activeKeyword)
            }
          }
        }
      }
    }
   })

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="box" v-for="(key, index) in inputs">
    <div>
      <span class="headline-ok">{{key.input1}} | </span>
      <span class="headline-ok">{{key.input2}} | </span>
      <span class="headline-ok">{{key.input3}}</span>
      <br>
      
    </div>
  </div>
  
  <div class="box" v-for="(key, index) in inputs">
  <div class="form-inputs">
    <label class="label is-capitalized">Input 1</label>
    <div class="field">
      <div class="control is-expanded">
        <input class="input" type="text" v-model="key.input1">
      </div>
    </div>
  </div>
  <div class="form-inputs">
    <label class="label is-capitalized">Headline Two </label>
    <div class="field">
      <div class="control is-expanded">
        <input type="text" v-model="key.input2" class="input">
      </div>
    </div>
  </div>
  <div class="form-inputs">
    <label class="label is-capitalized">Headline Three </label>
    <div class="field">
      <div class="control is-expanded">
        <input type="text" v-model="key.input3" class="input">
      </div>
    </div>
   </div>
   </div>
  
  
  </div>

Answer 1

使用过滤器方法搜索每个输入的匹配子字符串：

new Vue({
  el: '#app',
  filters: {
    keyword(value, key, replacer) {
      return (value && value.includes(key)) ? value.replace(key, replacer) : value
    }
  },
  data() {
    return {
      replacer: 'Hello',
      inputs: [{
          key: 'foo',
          model: null
        },
        {
          key: 'bar',
          model: null
        },
        {
          key: 'baz',
          model: null
        }
      ],
      demo: '',
      demoString: 'Watch as blah is replaced with Hello'
    }
  },
  mounted () {
    let index = 0
    
    setInterval(() => {
      this.demo += this.demoString.charAt(index)
      
      if (this.demo === this.demoString) {
        this.demo = ''
        index = 0
      } else {
        index++
      }
    }, 250)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for="(i, j) in inputs">
  <label>Replace {{ i.key }} with {{ replacer }}</label>
  <input v-model="i.model" :key="`input-${j}`">
  <p :key="`p-${j}`">{{ i.model | keyword(i.key, replacer) }}</p>
  </template>
  
  <hr/>
  <label>{{ this.demoString }}</label>
  <input v-model="demo">
  <p>{{ demo | keyword('blah', 'Hello') }}</p>
</div>

主动搜索并替换字符串

1 个答案: