问两个v数据表，第二个表具有v-select，它使用下拉列表中第一个表中的数据.以某种方式被绑定到最新的数据

EN

    <template>
        <v-container>
            <v-data-table
                :headers="tableHeaders"
                :items="items"
                class="elevation-1"
            >
            <template #[`item.display`]="{item}">
                <v-text-field
                            v-model="item.display"
                            :hide-details="true"
                            dense
                            outlined
                            :autofocus="true"
                            label="Display"
                        >

                            <!-- <v-icon v-if="header.draggable" slot="prepend"
                                >mdi-drag-vertical</v-icon
                            > -->
                </v-text-field>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
import draggable from 'vuedraggable'
import _ from 'lodash'

export default {
    components: { draggable },
    props: {
        headers: { type: Array, required: true, default: [] },
        defaultItem: { type: Object, required: true, default: {} },
        allowDrag: { type: Boolean, required: false, default: false },
        useModal: { type: Boolean, required: false, default: false },
        data: { type: Array, required: true, default: [] },
    },
    data: () => ({
        dialog: false,
        dialogDelete: false,
        items: [],
        editedIndex: -1,
        editedItem: {},
    }),
    computed: {
        tableHeaders() {
            let new_headers = JSON.parse(JSON.stringify(this.headers))
            new_headers.push({
                text: 'Actions',
                value: 'actions',
                sortable: false,
            })
            return new_headers
        },
    },
    mounted() {
        this.items = _.cloneDeep(this.data)
        this.editedItem = _.cloneDeep(this.defaultItem)
    },
    created() {},
    methods: {
        addNew() {
            console.log('add new')
            const addObj = _.cloneDeep(this.defaultItem)
            addObj.id = this.items.length + 1
            this.items.push(addObj)
            this.$emit('input', this.items)
        },
    },
}

 <matching-game-crud-table
                            :headers="headers"
                            :default-item="default_item"
                            :data="answerObjects"
                            allow-drag
                            v-model="answerObjects"
 ></matching-game-crud-table>
 <v-data-table
     :headers="promptHeaders"
     :items="prompts"
     class="elevation-1"
 >
    <template #[`item.answer`]="{item, index}">
        <v-select
           :hide-details="true"
           v-model="item.answer"   
           :items="answerObjects"
           item-text="display"
           item-value="display"
           outlined
           dense
           label="Choose an answer value"
           @input="change($event, true)"
        ></v-select>
    </template>                       
 </v-data-table>
<script>
import draggable from 'vuedraggable'
import _ from 'lodash'
import MatchingGameCrudTable from '../../MatchingGameCrudTable.vue'

export default {
    name: 'MatchingGame',
    components: {  MatchingGameCrudTable, draggable },
    props: {
        value: { type: String, required: true },
        data: { type: Object, required: true },
    },
    watch: {
        answerObjects(newData, oldData) {
            console.log(newData)
            this.items = [newData]
            console.log(this.items)
            // this.mainBucket = this.setMainBucket()
        },
    },
   data(){
     return{
       default_item: {
            id: 0,
            display: '',
            feedback: '',
        },
       prompts: [],
       answerObjects: [],
       items: [],
     }
   }
</script>