Ответы пользователя по тегу Vue.js
  • Как изменить data() свойство компонента VUE полученными с сервера данными?

    artloveyou
    @artloveyou
    Вам стоит для понимания упростить свой код, в общем случае это могло бы выглядеть
    так:
    <template>
      <div>
        {{ dataFromAPI }}
    
        тут вызов апи по событию, в вашем случае вы его к чему-нибудь привязываете
        <button @click="getAPI">Get API</button>
      </div>
    </template>
    
    <script>
    // смешивать jQuery c Vue - плохой вариант, лучше используйте axios
    import axios from 'axios'
    
    export default {
      data() {
        return {
          // тут у вас реактивное свойство
          dataFromAPI: null,
        }
      },
      mounted() {
        // тут первый вызов апи при загрузке страницы
        this.getAPI()
      },
      methods: {
        getAPI() {
          return axios
              .get('https://api.your.address')
              .then(response => {
                if (response.data) {
                  // когда апи возвращает данные передаем их реактивному свойству
                  // и они обновляются без перезагрузки, как вам надо
                  this.dataFromAPI = response.data
                }
              })
              // ловим ошибки
              .catch(error => {
                console.log(error);
              })
              .finally(() => {
                // если надо -- дополнительные действия (выключить лоадер, например)
              })
        }
      }
    }
    </script>


    и разобравшись вернуться к тому что вы делаете.
    Ответ написан
    4 комментария
  • Как сделать валидацию инпута c типом number Vue.js?

    artloveyou
    @artloveyou
    <template>
    
    <input type="number" min=1 max=5 :class="{invalid:userChoice < 1 || userChoice > 5}" v-model="userChoice" />
    
    </template>
    
    <script>
    export default {
      data() {
        return {
          userChoice: 1
        }
      }
    }
    </script>


    https://codesandbox.io/s/tender-dream-xxjb7?file=/...

    Правда работает, пока стрелками выбор производится, а если вручную заполнять инпут, надо доп проверку пилить
    Ответ написан
    Комментировать
  • У компонента vuetify v-icon можно как то сделать фон и назначить его цвет?

    artloveyou
    @artloveyou
    Если так надо
    617278eb0cbb9097018385.png

    то можно так попробовать
    <template>
    
      <v-text-field some_propses>
        <template v-slot:append>
          <v-icon>Email</v-icon>
        </template>
      </v-text-field>
    
    </template>
    
    <script>
    export default {
      data() {
        return {
    
        }
      }
    }
    </script>
    
    <style>
    .v-text-field > .v-input__control > .v-input__slot {
      background-color: green;
    }
    </style>
    Ответ написан
    Комментировать
  • Как получать динамически высоту блока в vue?

    artloveyou
    @artloveyou
    methods: {
        resizeHandler(e) {
          console.log(this.$refs.height.clientHeight)
        }
      },
    
      created() {
          window.addEventListener("resize", this.resizeHandler)
      },
      destroyed() {
          window.removeEventListener("resize", this.resizeHandler)
      },
    Ответ написан
    Комментировать
  • Возможно ли создать копию store для одного и того же компонента с разными id?

    artloveyou
    @artloveyou Автор вопроса
    На объектах, которые я создаю без vuex store это работает
    https://codesandbox.io/s/vigorous-lake-k5u8p?file=...

    let original = {
      foo: 'original',
      bar: {
        a: 1,
        b: 2
      }
    };
    
    let clone = {};
    
    for (let key in original) {
      clone[key] = original[key];
    }
    
    clone.foo = 'clone'; 
    
    console.log( original ); 
    console.log( clone );


    С vuex store не работает https://jsfiddle.net/84j5bfg9/2/
    <div id="app1">
      <p>{{ count }}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </p>
    </div>


    // make sure to call Vue.use(Vuex) if using a module system
    
    let original = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
      	increment: state => state.count++,
        decrement: state => state.count--
      }
    })
    
    
    
    // 1
    let clone = {};
    
    for (let key in original) {
      clone[key] = original[key];
    }
    
    
    /* 
    // 2
    var clone = Object.assign({}, original);
     */
    
    console.log( original.state.count ); 
    console.log( clone.state.count );
    
    
    new Vue({
      el: '#app1',
      computed: {
        count () {
    	    return clone.state.count
        }
      },
      methods: {
        increment () {
          clone.commit('increment')
        },
        decrement () {
        	clone.commit('decrement')
        }
      }
    })


    Ну и когда я подключаю lodash.cloneDeep() получаю
    Uncaught TypeError: Cannot convert a Symbol value to a string

    import Vue from 'vue';
    import Vuex from 'vuex';
    import VueLodash from 'vue-lodash';
    import lodash from 'lodash';
    
    Vue.use(Vuex);
    Vue.use(VueLodash, { lodash: lodash });
    
    import App from '../components/copy-calculator/Index.vue';
    import myApp from '../store/modules/myApp/myApp';
    
    const store = new Vuex.Store({
        modules: { myApp }
    });
    
    // Это работает
    // let data = [
    //     { id: 1, values: { a: 'a', b: 'b' } },
    //     { id: 2, values: { c: 'c', d: 'd' } }
    // ];
    // let clone = lodash.cloneDeep(data);
    // console.log(clone);
    
    
    const appInstances = document.querySelectorAll('.myApp');
    appInstances.forEach((appInstance)=>{
    
       // Это уже не работает
        let clone = lodash.cloneDeep(store);
    
        new Vue({
            el: `#myApp_${  appInstance.dataset.id}`,
            clone,
            components: { App },
        });
    
    });
    Ответ написан