0xD34F

data: () => ({
  items: [
    { name:      'PHOTOSHOP', val: 88, color:    'red' },
    { name:    'ILLUSTRATOR', val: 92, color:  'green' },
    { name:         'SKETCH', val: 90, color: 'orange' },
    { name: 'AFFTER EFFECTS', val: 98, color:   'blue' },
  ],
}),

methods: {
  liText: item => `${item.name} ${item.val}%`,
  liStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

<ul>
  <li
    v-for="n in items"
    v-text="liText(n)"
    :style="liStyle(n)"
  ></li>
</ul>

data: () => ({
  show: false,
  items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
  status: 'статус',
}),
methods: {
  selectStatus(status) {
    this.status = status;
    this.show = false;
  },
},

<div
  v-text="status"
  @click="show = !show"
></div>
<ul v-show="show">
  <li
    v-for="n in items"
    v-text="n"
    @click="selectStatus(n)"
  ></li>
</ul>

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

modals() {
  return new Proxy(this.$store.state.modals, {
    set: (target, prop, value) => {
      this.$store.commit('dialogShow', { [prop]: value });
      return true;
    },
  });
},

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

В Network указывается не jpeg, а text/html

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

Не работает

есть вариант решения?

Я хочу что бы у инпутов focus срабатывал только по клику

arr.map(n => ({
  ...n,
  items: n.items.filter(m => m.checked).map(m => ({ ...m })),
}))

возможно, computed надо высчитывать?

computed: {
  checkedArr() {
    return this.arr.map(/* ... */);
  },
},

created() {
  this.popup = _.throttle(function(state) {
    this.show = ({
      enter: true,
      leave: false,
    })[state];
  }, 500, {
    leading: false,
    trailing: true,
  });
},

this.popup = _.throttle(show => this.show = !!show, 500, {
  leading: false,
  trailing: true,
});

<a href="#" @mouseenter="popup(1)" @mouseleave="popup(0)">

решил использовать фильтр

зачем передавать: @my-event="myEvent" ?

<modal-notifications :aa.sync="isActive" :message="message"></modal-notifications>

closeModalWindow() {
  this.$emit('update:aa', false);
},

closeModalWindow() {
  this.$emit('input', false);
},

<modal-notifications v-model="isActive" :message="message"></modal-notifications>

Я же делаю из потомка this.$emit('my-event', this.isActive) которое слушает родитель.

эмит выше вроде бы не нужен, но без него не работает

И еще вопрос. Что делает:

myEvent: function(isActive) {
  this.isActive = isActive
}

Почему оно должно что-то принимать? Можно же просто значение из data взять.

obj() {
  return this.items[0];
},

<div v-if="obj">
  <div v-for="(val, key) in obj">
    ...

new Vue({
  router,
  store,
  components: {
    AppModile: () => import('@/AppMobile.vue'),
    App: () => import('@/App.vue')
  },
  render: h => h(isMobile ? 'AppMobile' : 'App')
}).$mount('#app')

получать данные для корзины - в actions, через Promise.all по id вытаскивая данные для каждого товара?

todos: [
  { open: false, ... },
  { open: false, ... },
  ...
],

Правильно ли подключаю карту