Vue-model not working in select2 laravel vuejs

Question

I've encountered a problem in which I cannot assign value to my select2 option, even though I have available data on my devtools but the problem is it didn't reflect my v-model which is select2. It would be great if anybody could figure it out, thank you so much in advance!.

Vue Devtools

Select2

 <select class="details-input form-control select2" id="kt_select_fullname" name="fullname" v-model="formFields.fullname">
     <option label="Label"></option>
     <option v-for="(result,index) in formFields.results" :key="index" :value="index">{{result.first_name}} {{result.middle_name}} {{result.last_name}}</option>
 </select>

Script when clicked edit button, it triggered editEntry function and it reflects the value to my devtools

export default {
  components: { Dialog },
      data() {
          return {
              create: false,
              edit: false,
              formFields: {
                  id: '',
                  fullname: ''
              },
        }
    },
    methods: {
    editEntry(id) {
         axios.get(BASE_URL + "/transportation/driver/"+id).then(response => {
                vm.formFields.fullname = response.data[0].fullname;
    });

Gustavo IAS · Accepted Answer · 2021-06-28 04:33:51Z

I limit myself only to solving the problem based on the interpretation of the code provided, and I eliminate the rest of the code, due to errors due to undefined variables (BASE_URL, last_name, middle_name ...) not provided in the question.

inconsistent / errors:

in formFields.results // According to the code provided, the results attribute does not exist (in formFields) and it is also inconsistent with its capture devtools, where last_name does not exist literally. So I was forced to simulate them (formFields_DataApi).

:value="index" // since with v-model you try to capture fullname then this should be the desired value in your iteration. Changed:

:value="result.fullname" // or result.someAttribute searched

You can run the solution and check the reactivity. I hope it will be useful

<head>
  <title>VueJs Introduction</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
  </script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

</head>

<body>

  <div id="app" style="text-align:center;">
    <h1>{{ message }}</h1>
    <p></p>

    <!--  <select class="details-input form-control select2" id="kt_select_fullname"  name="fullname" v-model="formFields.fullname">
      <option label="Label"></option>
      <option v-for="(result,index) in formFields.results" :key="index" :value="index">{{result.first_name}} {{result.middle_name}}       {{result.last_name}}
      </option>
    </select> 
    -->

    <select class="details-input form-control select2" id="kt_select_fullname" name="fullname" v-model="formFields.fullname">
      <option label="Label"></option>
      <option v-for="(result,index) in formFields_DataApi" :key="index" :value="result.fullname">
        {{result.fullname}} {{result.gender}} {{result.someData}}
      </option>
    </select>

    <pre> {{this.formFields}}</pre>
  </div>
  <script type="text/javascript">
    var vue_det = new Vue({
      el: '#app',
      data: {
        message: 'Only fixed question',

        create: false,
        edit: false,
        formFields: {
          id: '',
          fullname: ''
        },
        // ONLY SIMULATION DATA
        formFields_DataApi: [{
            id: 1,
            fullname: 'name1',
            gender: 'M',
            someData: 'someData'
          },
          {
            id: 2,
            fullname: 'name2',
            gender: 'F',
            someData: 'someData'
          },
          {
            id: 3,
            fullname: 'name3',
            gender: 'M',
            someData: 'someData'
          },
        ]
      },


    });
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <!--<script src="script.js"></script>-->
</body>

Collectives™ on Stack Overflow

Vue-model not working in select2 laravel vuejs

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