1

Есть следующий код, при работе с v-model и html тегами <input type="text">:

<template>
  <InputTextApp class="inputTextAdditionData" placeholder_text="" v-model="cell_phone_number">
  </InputTextApp>
</template>


<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  data () {
    return {
      loading_cell_phone_number: '',
    }
  },

  computed: {
    cell_phone_number: {
      get () {
        return this.loading_cell_phone_number;
      },
      set (value) {
        this.loading_cell_phone_number = value;
      }
    },
}
</script>

Вопрос:
Если в содержимом вычисляемых св-в необходимо иметь в наличии вышеуказанный код, каким образом я должен проксировать данные из геттеров что бы с эмитировать работу данного кода?

В качестве примитивного теста я попробовал сделать нечто подобное:

// vuex хранилище: tracker.js
const axios = require("axios");

export const getters = {
  
  personTypeInput3: (state) => {
      
    return {index: {
      get () {
        return this.loading_cell_phone_number;
      },
      set (value) {
        this.loading_cell_phone_number = value;
      }
    },
  }}
  
};


<template>
  <InputTextApp class="inputTextAdditionData" placeholder_text="" v-model="cell_phone_number">
  </InputTextApp>
</template>


<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  data () {
    return {
      loading_cell_phone_number: '',
    }
  },

  computed: {
    cell_phone_number: {
    ...mapGetters("tracker", [
    "personTypeInput3",
    // Here you can import other getters from the products.js
  ])
}
</script>

После чего принял код содержимого в вычисляемом св-ве следующего вида:

введите сюда описание изображения


Что необходимо прописать в геттере хранилища что бы на выходе в вычисляемом св-ве получить код, который указан в самой первой реализации(в начале поста)?
(что то вроде этого:)

введите сюда описание изображения

1 ответ 1

2

Какой огромный вопрос, от одного чтения мозги устали.

Тут немного не верно используются v-model и computed. Вычисляемые свойства - это как правило функции, которые считаются один раз при вызове, если хотя бы одна из зависимостей была обновлена, а новое значение не было вычислено. Морочиться о том, где вычисляемое свойство хранит результат, не нужно, ибо оно сделает это автоматически.

v-model - это директива, которая применяется чаще всего на элементах ввода. Допустим имеется следующий код:

<template>
  <MyInput/>
</template>

<script>
  import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{
    data () {
      return {
        phoneNumber: ''
      }
    }
  }
</script>

, и нам необходимо выполнить двустороннее связывание phoneNumber и MyInput. Можно сделать это так:

<MyInput
  :value="phoneNumber"
  @input="setPhoneNumberFn"
/>

, а можно вот так:

<MyInput
  v-model="phoneNumber"
/>

v-model - это просто короткая запись первого варианта. Заметьте, что вычисляемое свойство, тем более такое мудрёное, здесь не нужно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.