Actively Searching For A String & Replacing it

Question

I've got input fields on one side of the page which is then displayed into boxes on the other side that actively shows what a user has inputted but in an organized way. I need to actively search the input fields for a specific string, in this case 'key' and then it would instantly change to a value stored in data. I've got a searchkeyword() function that should go through the array of objects where input fields are stored but haven't made it work just yet.

For example, if user types in 'key this is david' in input1 then it would change 'key' to it's stored value which is 'hello'. The value of key is also changing if a user clicks on other options. Really don't know where to go from here so any input helps :)

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

Use a filter method to search for the matching substring of each input:

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>