Какое влияние оказывают теги <form>на процесс рендеринга vue.js и систему креативности? - PullRequest
Новая
       30

Какое влияние оказывают теги <form>на процесс рендеринга vue.js и систему креативности?

0 голосов
/ 09 декабря 2018

Я обнаружил, что теги формы в приложении vue.js нарушали визуализацию.Приложение представляет собой тест, который извлекает вопросы из локального документа json при настройке формы, вопросы сохраняются с помощью vuex и переносятся в компонент с вычисленными свойствами.Интересно, что тест переместился бы на второй тест перед сбоем с ошибками рендерингаоднако, когда я удаляю теги формы, викторина переходит к завершению.

явно не идеален для удаления тегов формы, поскольку они полезны для вспомогательных технологий.Так какой же ролик образует теги или семантические теги html в целом, играет с системой ревью творчества или процессом рендеринга?Я прочитал предостережения в руководстве, которые, похоже, не решают эту ситуацию.

ниже находится компонент формы и vuex

компонент формы 

<template>
    <div class="form">
        <h4><b>{{question.question}}</b></h4>
        <div id="form-layout">
            <form >
                <p>
                    <input type="radio" v-model="answer" value="a">
                    <label for="one">{{question.multiple_choice[0].a}}</label>
                </p>
                <p>
                    <input type="radio" v-model="answer" value="b">
                    <label for="two">{{question.multiple_choice[0].b}}</label>
                </p>
                <p>
                    <input type="radio" v-model="answer" value="c">
                    <label for="three">{{question.multiple_choice[0].c}}</label>
                </p>
                <p>
                    <input type="radio" v-model="answer" value="d">
                    <label for="four">{{question.multiple_choice[0].d}}</label>
                </p>
                <button @click="submitQuestion">submit answer</button>
            </form>
        </div>
        <br>
        <button @click="$emit('submitQuiz')">submit quiz</button>
    </div>
</template>
    <script>
    import { mapGetters } from 'vuex';

        export default {
            data() {
                return {
                    questionNumber: 0,
                    answer: ''
                }
            },
            computed: {
                getQuestions() {
                    return this.$store.getters['QuizModule/getQuestionsArray']
                },
                question() {
                    return this.getQuestions[this.questionNumber]
                }
            },
            methods: {
                submitQuestion: function() {
                    // check answer
                    // reset form
                    this.questionNumber += 1
                }
            }
        }
    </script>

vuex 

import questionBank from '@/question-bank/practice.json'

const store = new Vuex.Store({
    state: {
      questionsArray: null,
    },
    getters: {
      getQuestionsArray: function (state) {
          return state.questionsArray
      },
      getQuestion: state => {
        const questions = state.questionsArray
        return index => {
          return questions[index]
        }
      }
    },
    mutations: {
      setQuestionsArray (state, questions) {
          state.questionsArray = questions
        }
    },
    actions: {
        async setQuestionsArray ({commit}, questionArray){
            try {
                let questions = []
                for(let i = 0; i < questionArray.length; i++){
                    questions[i] = questionBank[questionArray[i]]
                }
                commit('setQuestionsArray', questions)
            } catch (error) {
                console.log(error)
            }
        }
    }
  })

export default store
...