vuetify v-select передача параметров выбранного итема в функцию

Question

имеется следующее view:

<v-select
    label="Выбрать отправителя из списка *"
    placeholder="Не выбрано"
    :items="contacts"
    item-text="contact_name"
    item-value="id"
    dense
    outlined
    v-on:change="contact_choose(item)"
></v-select>

И script:

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        contacts: [{"id":2,"contact_name":"dsasda","phone":"adsdsa","country":"adssaddsa","address":"dsadsa","delivery_time":"dasads","comment":"dasadsasd","user_id":1,"created_at":"2020-12-21 08:02:22","updated_at":"2020-12-21 08:02:22"},{"id":1,"contact_name":"No Name","phone":"88001234567","country":"KZ","address":"Test","delivery_time":"10:00 - 12:00","comment":"Test!","user_id":1,"created_at":"2020-12-21 06:42:46","updated_at":"2020-12-21 06:42:46"}]
    }),
    methods: {
        contact_choose: function(contact)
        {
            console.log(contact)
        }
    }
})

Консоль выдаёт следующую ошибку:

Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Подскажите пожалуйста, из-за чего возникает эта ошибка? И как можно передать данные по выбранному селекту в функцию без привязки к модели, и если привязка к модели обязательно нужна, как это сделать? Спасибо!

Answer 1

Вы не правильно написали v-on:change="contact_choose(item)". Не надо передавать item - он будет в аргументе метода.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
    selected_contact: null,
      contacts: [{
        "id": 2,
        "contact_name": "dsasda",
        "phone": "adsdsa",
        "country": "adssaddsa",
        "address": "dsadsa",
        "delivery_time": "dasads",
        "comment": "dasadsasd",
        "user_id": 1,
        "created_at": "2020-12-21 08:02:22",
        "updated_at": "2020-12-21 08:02:22"
      }, {
        "id": 1,
        "contact_name": "No Name",
        "phone": "88001234567",
        "country": "\u041a\u0430\u0437\u0430\u0445\u0441\u0442\u0430\u043d, \u0410\u043b\u043c\u0430\u0442\u044b",
        "address": "\u0443\u043b. \u0410\u043b\u044c-\u0424\u0430\u0440\u0430\u0431\u0438 282",
        "delivery_time": "10:00 - 12:00",
        "comment": "\u041f\u0435\u0440\u0435\u0434 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u043e\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u044f!",
        "user_id": 1,
        "created_at": "2020-12-21 06:42:46",
        "updated_at": "2020-12-21 06:42:46"
      }],
    };
  },
  methods: {
    contact_choose: function(contact) {
      console.log(contact)
    },
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
      <v-main>
        <v-select
          label="Выбрать отправителя из списка *" 
          placeholder="Не выбрано" 
          :items="contacts" 
          item-text="contact_name" 
          item-value="id"
          dense 
          outlined
          return-object
          v-on:change="contact_choose"
        />
        
     </v-main>
  </v-app>
</div>

Проверьте то, что у вас рендерится.

БЛОГ НА HUSL

vuetify v-select передача параметров выбранного итема в функцию

Ответы (1 шт):