Vue-model 在 select2 laravel vuejs 中不起作用答案

【问题标题】：Vue-model not working in select2 laravel vuejsVue-model 在 select2 laravel vuejs 中不起作用
【发布时间】：2021-09-10 08:20:02
【问题描述】：

我遇到了一个问题，即我无法为我的 select2 选项赋值，即使我的 devtools 上有可用的数据，但问题是它没有反映我的 v-model，即 select2。如果有人能弄清楚，那就太好了，在此先感谢您！

Vue 开发工具

选择2

 <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>

脚本当点击编辑按钮时，它触发了editEntry函数并将值反映到我的开发工具中

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;
    });

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

我仅限于根据对所提供代码的解释来解决问题，并且由于未提供的未定义变量（BASE_URL、last_name、middle_name ...）导致的错误，我消除了其余代码问题。

不一致/错误：

formFields.results中 //根据提供的代码，results属性不存在（formFields中），也和它的抓包devtools不一致，这里last_name 在字面上并不存在。所以我不得不模拟它们（formFields_DataApi）。

:value="index" // 因为使用 v-model 你试图捕获 fullname 那么这应该是你迭代中想要的值。更改：

:value="result.fullname" // 或 result.someAttribute 搜索

您可以运行解决方案并检查反应性。希望对你有用

<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>

【讨论】：