Vuejs populate input fields value on a element select

Question

I am not sure if I am terming this correctly. I have a very simple vuejs application (I just started learning vue a couple of days ago, so my knowledge of vue is really limited).

I have a input field which acts as a search box. When we feed some text input, it triggers v-on:blur event to call a function. It then sets the suggestions which are displayed just below the searchbox.

What I am trying to achieve is, when any of those anchor tags are clicked (from the search suggestions), two new input boxes should be automatically populated with the values from the search suggestions.

{name: 'Some Name', state: 'Some State'}

A very simple and stripped version of the code is as https://jsfiddle.net/dfhpj08g/

new Vue({
  el: "#app",
  data: {
    suggestions: [],
    showSuggestions: false,
  },
  methods: {
    suggest() {
      // this is dynamically generated via ajax
      this.suggestions = [{
          name: 'A',
          state: 'OH'
        },
        {
          name: 'B',
          state: 'OR'
        },
      ];
      this.showSuggestions = true;
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-on:blur="suggest" placeholder="search">
  <div v-show="showSuggestions">
    <span>Did you mean</span>
    <li v-for="s in suggestions">
      <a href="#">
        {{s.name}} - ({{s.state}})
      </a>
    </li>
  </div>
  <input type="text" name="name" placeholder="name">
  <input type="text" name="state" placeholder="state">
</div>

A very simple and stripped version of the code - should be in the question — Jaromanda X
– Jaromanda X, Commented Mar 22, 2020 at 22:37

Terry · Accepted Answer · 2020-03-22 22:53:45Z

If you want to insert the values into your name and state fields, I would suggest using v-model on them and declaring the corresponding data in your component. In that way, you can simply set them using this.name and this.state:

data: {
  suggestions: [],
  showSuggestions: false,
  name: '',
  state: ''
},

Use v-model to bind name and state data to your input elements:

<input type="text" name="name" placeholder="name" v-model="name">
<input type="text" name="state" placeholder="state" v-model="state">

You can bind a click handler to each of the <a> elements, so that you will can pass the index of the clicked suggestion. This will allow you to do this.suggestion[i] to retrieve the data:

<li v-for="(s, i) in suggestions" v-bind:key="i">
  <a href="#" v-on:click.prevent="suggestionSelected(i)">
    {{s.name}} - ({{s.state}})
  </a>
</li>

Then, in your methods, you can create a new function suggestionSelected, which accepts the index of the suggestion as i. In that way, you can use the bracket syntax to access the selected suggestion:

suggestionSelected(i) {
  this.name = this.suggestions[i].name;
  this.state = this.suggestions[i].state;
}

See proof-of-concept example below:

new Vue({
  el: "#app",
  data: {
    suggestions: [],
    showSuggestions: false,
    name: '',
    state: ''
  },
  methods: {
    suggest() {
      // this is dynamically generated via ajax
      this.suggestions = [{
          name: 'A',
          state: 'OH'
        },
        {
          name: 'B',
          state: 'OR'
        },
      ];

      this.showSuggestions = true;
    },
    suggestionSelected(i) {
      this.name = this.suggestions[i].name;
      this.state = this.suggestions[i].state;
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-on:blur="suggest" placeholder="search">
  <div v-show="showSuggestions">
    <span>Did you mean</span>
    <li v-for="(s, i) in suggestions" v-bind:key="i">
      <a href="#" v-on:click.prevent="suggestionSelected(i)">
        {{s.name}} - ({{s.state}})
      </a>
    </li>
  </div>
  <input type="text" name="name" placeholder="name" v-model="name">
  <input type="text" name="state" placeholder="state" v-model="state">

</div>

Collectives™ on Stack Overflow

Vuejs populate input fields value on a element select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related