Я распечатал информацию из базы данных внутри элемента h3. Я хочу прочитать информацию отсюда и отправить ее в данные по умолчанию для экспорта?

#javascript #vue.js #vuetify.js

Вопрос:

 ...
 <div v-for="q in question" :key="q" >
            <h3> {{q.content}} </h3>
            <h3> A) {{q.a}}  </h3>
            <h3> B) {{q.b}} </h3> 
            <h3> C) {{q.c}} </h3>
            <h3> D) {{q.d}} </h3>
           <v-btn v-if="veritabani" class="mt-2 primary"  @click="add" > Add </v-btn>
        </div>
...
export default{
data()
{ 
item:''
}
...
 

Я хочу отправить информацию с первого h3 в элемент. Как мне это сделать в Vue.js?

Комментарии:

1. можете ли вы создать онлайн-пример, я думаю, он сможет четко сформулировать ваш вопрос codesandbox.io/s/vue

Ответ №1:

 <script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in questions" :key="index">
    <h3> {{item.content}} </h3>
    <h3> A) {{item.a}} </h3>
    <h3> B) {{item.b}} </h3>
    <h3> C) {{item.c}} </h3>
    <h3> D) {{item.d}} </h3>
    
    <button @click="setItem(item)">
      Add
    </button>
   
    
  <!--   <v-btn v-if="veritabani" class="mt-2 primary" @click="add"> Add </v-btn> -->
  </div>
  
  <div>
    Selected Item: {{item}}
  </div>
</div>
 

Скрипт:

 new Vue({
  el: '#app',
  data: {
    "questions": [
        {
        "content": "My first question",
        "a": "Option A",
        "b": "Option B",
        "c": "Option C",
        "d": "Option D"
      }
    ],
    item: null
  },
  methods: {
    setItem (item) {
        this.item = item
    }
  }
})
 

Пример скрипки JS

Предварительный просмотр