Vue, changing the name of an input via list item click

Question

I have an input that I'm using in relation two an unordered list with two list items, which is in place, but I"m trying to figure out how I can change the input name/id with the click of one of the list items.

The items are not links or buttons, so I just want to be able to click the item text and if 'Public' is clicked, the input name would become public, if 'Internal' is clicked I would want the input name to be internal

I'm using Vue which may have some better options, but basically I just want to send the name of the input later on in an ajax call and I only want the name to be determined by the click of a list item potentially with a default.

What is the best way to achieve this with Vue being used?

<div class="row notesInput">
          <div class="col-lg-12">
            <div class="tabs">
              <ul style="border-bottom:none !important; text-decoration:none">
                <li>Public</li>
                <li>Internal</li>
              </ul>
            </div>
            <div>
              <input type="text" name="public">
            </div>
          </div>
        </div>

Terry · Accepted Answer · 2020-02-28 14:36:09Z

First step: use component data to your advantage

You can simply store the desired input name attribute in the component data, e.g. inputName. Then, use v-on to bind a click event listener to your elements, so that whenever they are clicked, you invoke a method that updates the inputData property of your component.

new Vue({
  el: '#app',
  data:  {
    inputName: '',
  },
  methods: {
    setInputName(str) {
      this.inputName = str;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="row notesInput">
    <div class="col-lg-12">
      <div class="tabs">
        <ul style="border-bottom:none !important; text-decoration:none">
          <li v-on:click="setInputName('public')">Public</li>
          <li v-on:click="setInputName('internal')">Internal</li>
        </ul>
      </div>
      <div>
        <input type="text" v-bind:name="inputName">
        <br />
        Input name attribute is: {{ inputName }}
      </div>
    </div>
  </div>
</div>

Better: Use `v-for` to generate list items dynamically

If you don't want the manually provide the argument to the method, there's an easier way: you simply create a list of allowed names in the component data, too, and use v-for to generate the list dynamically:

new Vue({
  el: '#app',
  data:  {
    inputName: '',
    allowedNames: ['Public', 'Internal']
  },
  methods: {
    setInputName(str) {
      this.inputName = str.toLowerCase();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="row notesInput">
    <div class="col-lg-12">
      <div class="tabs">
        <ul style="border-bottom:none !important; text-decoration:none">
          <li
            v-for="(allowedName, i) in allowedNames"
            v-bind:key="i"
            v-on:click="setInputName(allowedName)">
            {{ allowedName }}
          </li>
        </ul>
      </div>
      <div>
        <input type="text" v-bind:name="inputName">
        <br />
        Input name attribute is: {{ inputName }}
      </div>
    </div>
  </div>
</div>

Even better: if there is no one-to-one correspondance between list item text and the desired name attribute

This can be useful in the case when, for example, you want the text to read Public but the name attribute to be another value. Instead of an array of strings, you can use an array of objects:

new Vue({
  el: '#app',
  data:  {
    inputName: '',
    allowedNames: [{
      label: 'Public (or any other arbitrary text you like)',
      name: 'public'
    }, {
      label: 'Internal (or any other arbitrary text you like)',
      name: 'internal',
    }]
  },
  methods: {
    setInputName(str) {
      this.inputName = str;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="row notesInput">
    <div class="col-lg-12">
      <div class="tabs">
        <ul style="border-bottom:none !important; text-decoration:none">
          <li
            v-for="(allowedName, i) in allowedNames"
            v-bind:key="i"
            v-on:click="setInputName(allowedName.name)">
            {{ allowedName.label }}
          </li>
        </ul>
      </div>
      <div>
        <input type="text" v-bind:name="inputName">
        <br />
        Input name attribute is: {{ inputName }}
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Vue, changing the name of an input via list item click

1 Answer 1

First step: use component data to your advantage

Better: Use `v-for` to generate list items dynamically

Even better: if there is no one-to-one correspondance between list item text and the desired name attribute

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

First step: use component data to your advantage

Better: Use v-for to generate list items dynamically

Even better: if there is no one-to-one correspondance between list item text and the desired name attribute

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Better: Use `v-for` to generate list items dynamically