用Vuejs做这件事的方法是什么 [英] What is the way to do it with Vuejs

问题描述

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

然后，我将有一个文本字段，它是一个计算属性.每次更改输入时，它将重新评估该字段值.

例如，我的字段是:

• GradeIni，GradeFin，类别，AgeCategory，AgeIni，AgeFin，性别(选择)
• isTeam(复选框)
• CategoryFullName

例如，有5个预定义的AgeCategory，第6个是Custom，自定义时，显示的是AgeIni和AgeFin

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

我的第一个回答问题是如何从服务器获取值.

我知道如何使用Ajax进行操作，但是在这种情况下，仅在页面加载时使用Laravel发送的Server变量会更容易.

因此，答案是2个选择:

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

或

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

因此，我想使用第二个，但这意味着我必须为页面中的每个选择选项"创建一个组件，这似乎有点繁琐.

因此，我对如何制作此页面感到有些困惑.用AJAX更好吗?是否能够从laravel中获取数据，并为每个列表创建一个组件，还是有更好的方法呢???

解决方案

您不需要使用许多组件.保持所选成绩的一种成分和一种变量就可以了.

您可以创建一个组件模板以显示所有成绩. 我已经创建了一个包含虚拟数据的模板，向您展示了如何做.

<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>

要设置默认值，可以在文档准备就绪时使用 .

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

我已经在此处创建了一个示例.

I have a page with 3 combos, 6 dependents inputs text ( if a special value is selected in combo, it will show, otherwise it will hide)

Then, I will have A text fields that is a computed property. Each time an input is changed, it will reevaluate this field value.

So, For instance, My fields are:

• GradeIni, GradeFin, Category, AgeCategory, AgeIni, AgeFin , Gender (selects)
• isTeam ( Checkbox )
• CategoryFullName

So, for example, There is 5 predefines AgeCategory,and the 6th is Custom, when Selected, it show AgeIni and AgeFin

Each time a value is change, CategoryFullName is reevaluated.

My first answered question was how to get values from server.

I knew how to do it with Ajax, but in this case, it was easier to just use Server variable sent by Laravel when pages load.

So, the answer was 2 options:

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

Or

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

So, I would like to use the second one, but it means I have to create a component for each Select Option in my page, which seems a little heavy.

So, I'm a little bit confused about how should I make this page. Is it better by AJAX, is it better to be able to get data from laravel, and o make a component for each list, or is there a better way to do it????

解决方案

You dont need to use many components. One component and one variable to keep the selected grade are fine.

You can create a component template to display all the grades. I have created one template with dummy data to show you how you can do it.

<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>

The component should be registered like this:

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

The tricky part is how you will select a default value and keep it synced with the parent. To do so, you can use .sync

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

To set default value you can update the selectedGrade variable when the document is ready, using vm.$set.

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

I have created an example with dummy data here.

这篇关于用Vuejs做这件事的方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！