php - Vue-model not working in select2 laravel vuejs

one text

Solution:

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/popper.js@1.16.0/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>

Source