javascript - How to pass the second variable to the Vue Laravel component and set it by default to the input variable?

Solution:

Vlad, nearly there, you pass the second prop just as you did with the first one. You should then bind (v-model) the input to this value, however doing jus that will cause an error (avoid mutating a prop),So use as prop, maybe, initRegion, the data variable you maybe call region and set it to this.initRegion. If you struggle, let me know.

<html>
<head>
    <meta charset="UTF-8">
    <title>Vue Testing</title>
</head>
<body>

    <div id="app">

        <autocomplete-region-component
            query-prop="regionName"
            init-region="1"
        >
        </autocomplete-region-component>

    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        Vue.component('autocomplete-region-component', {
      props: {
          queryProp: {
              required: false,
              type: String
          },
          initRegion: {
              required: false,
              type: String
          }
      },
      computed: {
          val2: {
              get() {
                  return this.otherValue;
              },
              set(newValue) {
                  this.$emit('other-input', newValue);
              },
          },
      },
      data() {
          return {
              results: [],
              query: this.queryProp,
              region: this.initRegion
          };
      },
      methods: {
          autoComplete() {
              this.results = [];
              if(this.query.length > 2){
                  axios.get('/api/regions',{params: {_limit: 2, query: this.query}}).then(response => {
                      this.results = response.data;
                  });
              }
          },
          selectRegion(result) {
              let inputWithRegionName = document.querySelector('.js-region-name');
              let inputWithRegionId = document.querySelector('.js-region-id');
              let listRegions = document.querySelector('.panel-footer');

              inputWithRegionName.value = result.name;
              inputWithRegionId.value = result.id;
              listRegions.hidden = true;
          }
      },
            template:`
            <div>
                <input
                    type="text"
                    placeholder="Начните вводить ваш город и выберите его из списка"
                    autocomplete="off"
                    v-model="query"
                    v-on:keyup="autoComplete"
                    class="form-control js-region-name"
                    name="regionName"
                    value=""
                >
                <input
                    type="hidden"
                    class="form-control js-region-id"
                    name="regionId"
                    :value="region">
                <div class="panel-footer" v-if="results.length">
                    <ul class="list-group select-region">
                        <li class="list-group-item list-region" v-for="result in results" v-on:click="selectRegion(result)">
                            {{ result.name }}
                        </li>
                    </ul>
                </div>
            </div>
            `,
            mounted() {
                //
            }
        })

        var app = new Vue({
          el: '#app',
          data: {},
        })  

    </script>
</body>
</html>

Answer

Solution:

You can pass as many values as you want via props, however there is only one "value" that will interact with v-model.

The good news is that v-model is really just a handy abstracted pattern for components.

You could make a second "value" in a component as follows:

<!-- updateV2 method sets v2 to value raised in the event -->

<my-component
    v-model="v1"
    other-value="v2"
    @other-input="updateV2"
></my-component>

computed: {
    val2() {
        get() {
            return this.otherValue;
        },
        set(newValue) {
            this.$emit('other-input', newValue);
        },
    },
}

Source