Question

我有一个包含3个组合的页面，6个dependents输入文本（如果在组合中选择了特殊值，它将显示，否则它将隐藏）

然后，我将有一个计算属性的文本字段。每次更改输入时，它都会重新评估此字段值。

所以，例如，我的字段是：

GradeIni，GradeFin，类别，AgeCategory，AgeIni，AgeFin，性别（选择）
isTeam（Checkbox）
CategoryFullName

因此，例如，有5个预定义AgeCategory，第6个是Custom，当选择时，它显示AgeIni和AgeFin

每次更改值时，都会重新评估CategoryFullName。

My first answered question是如何从服务器获取值。

我知道如何使用Ajax，但在这种情况下，当页面加载时，使用Laravel发送的Server变量更容易。

所以，答案是2个选项：

@foreach ($grades as $grade)
    <option ...>{{ $grade }}</option>
@endforeach

或者

<grades :grades="{{ $grades }}"></grades>

所以，我想使用第二个，但这意味着我必须在我的页面中为每个选择选项创建一个组件，这看起来有点重。

所以，我对如何制作这个页面感到有点困惑。 AJAX是否更好，是否能够从laravel获取数据，并为每个列表创建一个组件，或者有更好的方法来做到这一点????

Answer 1

您不需要使用许多组件。一个组件和一个变量可以保持所选的等级。

您可以创建组件模板以显示所有成绩。我创建了一个带有虚拟数据的模板，向您展示如何做到这一点。

<template id="grades-list">
    Curently selected: Title {{selected.title}} Value: {{selected.value}}
    <select v-model="selected">
        <option v-for="grade in grades" :value="grade">{{grade.title}}</option>
    </select>
</template>

组件应该像这样注册：

Vue.component('grades', {
    props: ['grades', 'selected'],
    template: '#grades-list'
})

棘手的部分是如何选择默认值并使其与父级同步。为此，您可以使用.sync

<!-- you can use :grades="{{ grades }}" with Blade too-->
<grades :grades="grades" :selected.sync="selectedGrade"></grades>

要设置默认值，您可以使用vm.$set在文档准备就绪时更新selectedGrade变量。

new Vue({
    el: 'body',
    data: {
        'selectedGrade': ''
    },
    ready() {
        this.$set('selectedGrade', this.grades[1])
    }
})

我创建了一个虚拟数据here的例子。

使用Vuejs进行此操作的方法是什么

1 个答案: