Vue.js visible=!visible

154
18 ноября 2018, 00:10

Нужна помощь,вот весь код моего компонента(страницы) Подскажите как сделать так,чтобы при заполнении окна справа(комментарии) и нажатии кнопки далее,он переходил на следующее повреждение ,а предыдущее отмечал галочкой,как на картинке(пока у меня галочки стоят на каждом пункте и они везде видны) Данные я получаю с API,буду рад если поможете) Комментарий пишется тут

                       <v-text-field
                        label="Введите текст комментария"
                        required>
                      </v-text-field>
<template>
      <div class="main">
      <div>
        <menus></menus>
        **<!--Лист с итемами-->**
        <v-card class="elevation-4 mb-3">
          <div  class="item-container">
            <v-card
              v-on:click.native="selected=component"
              v-for="component in info.components"
              :key="component.id"
              tabindex="1"
              class="item">
              <h3>{{component.serialNumber}} . {{component.name}}</h3>
              <v-icon class="icon-damage" color="green">check_circle</v-icon>
            </v-card>
          </div>
        </v-card>
        <!--Карточка справа-->
        <div class="main-info">
          <div v-if="selected">
          <v-layout class="info">
            <v-flex>
              <v-card class="info-car">
                <v-card-media
                  class="white--text"
                  height="80px"
                  src="/src/assets/background.png">
                  <v-container fill-height fluid>
                    <v-layout fill-height>
                      <v-flex xs12 align-end flexbox>
                        <span class="headline">{{selected.serialNumber}} . {{selected.name}}</span>
                      </v-flex>
                    </v-layout>
                  </v-container>
                </v-card-media>
                <v-card-title>
                  <div class="card-info">
                    <span class="grey--text">
                      <h2>Фотографии</h2>
                    </span><br>
                    <!-- Блок фоток-->
                    <div class="img-load">
                      <div class="item1">
                        <div class="img-container">
                          <img :src="url" alt="" v-if="url"/>
                          <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/>
                          <label class="loadfile">
                            <input class="inputfile" type="file" @change="onFileSelected">
                          </label>
                        </div>
                      </div>
                    <div class="item1">
                      <div class="img-container">
                        <img :src="url" alt="" v-if="url" />
                        <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/>
                        <label class="loadfile">
                          <input class="inputfile" type="file" @change="onFileSelected">
                        </label>
                    </div>
                  </div>
                    <div class="item1">
                      <div class="img-container">
                        <img :src="url" alt="" v-if="url"/>
                        <img src="../assets/03.expert.inspection.photo.png" alt=""  v-else />
                        <label class="loadfile"><input class="inputfile" type="file" @change="onFileSelected"></label>
                      </div>
                    </div>
                    </div>
                    <span class="grey--text">
                      <h2>Тип повреждения</h2>
                    </span><br>
                    <!--Блок чекбоксов-->
                    <div class="piker">
                      <v-checkbox
                      class="check-damage"
                      v-for="damage in info.damages"
                      :key="damage.id"
                      color="grey"
                      :label="damage.name">
                      </v-checkbox>
                    </div>
                    <span class="grey--text">
                      <h2>Комментарий</h2>
                    </span><br>
                    <v-form v-model="valid">
                      <v-text-field
                        label="Введите текст комментария"
                        required>
                      </v-text-field>
                    </v-form>
                  </div>
                </v-card-title>
                <v-card-actions>
                  <v-btn
                    :to="'/infocar'"
                    class="btn-see"
                    color="red">Далее</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
          </div>
        </div>
        </div>
      </div>
    </template>
    <script>
    import axios from 'axios';
    import Menus from '../menus.vue';
    export default {
      components: {
        Menus,
      },
      data() {
        return {
          info: null,
          selected: null,
          selectedFile: null,
          url: null,
        };
      },
      methods: {
        onFileSelected(event) {
          this.selectedFile = event.target.files[0];
          this.url = URL.createObjectURL(this.selectedFile);
        },
        onUpload() {
          const formData = new FormData();
          formData.append(this.selectedFile.name, this.selectedFile);
          formData.append('name', 'files');
          axios.post('api/v1/files/create', {
            count: 1,
          }, {
            headers: {
              Authorization: `Bearer ${localStorage.getItem('user-token')}`,
            },
          })
            .then(() => axios.put('api/v1/files', formData, {
              headers: {
                'content-type': 'multipart/form-data',
                Authorization: `Bearer ${localStorage.getItem('user-token')}`,
              },
              onUploadProgress: (progressEvent) => {
                console.log(progressEvent.loaded / progressEvent.total);
              },
            }));
        },
      },
      mounted() {
        axios.get('api/v1/inspection/script', {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('user-token')}`,
          },
        })
          .then(response => (this.info = response.data));
      },
    };
    </script>
READ ALSO
Uncaught SyntaxError: Unexpected token &lt; Что это за ошибка?

Uncaught SyntaxError: Unexpected token < Что это за ошибка?

Эта ошибка возникает, когда перемещаю код jquery (отправляет данные на сервер node js) в отделный файл

232
Вставка символа где-то в строку

Вставка символа где-то в строку

Допустим есть строка с временем, например 1234, по какой-то причине она не разделена, привычным нам, двоеточиемМы знаем, что двоеточие будет...

149
Как зашифровать сообщение в aes256 на чистом JavaScript?

Как зашифровать сообщение в aes256 на чистом JavaScript?

Охота зашифровать сообщение в AES256Допустим есть ключ и есть сообщение

149
Не могу использовать &#171;let&#187; в visual studio 2012

Не могу использовать «let» в visual studio 2012

Ковыряю один проект на vs 2012Так вот хочу кое-что дописать, но js интерпретатор не понимает директиву let

160