Question

我有这样的路线设置：

String.prototype.repeat

我有以下表单结构，我通过循环遍历Route::post('subjects/{subject}/{tag}', 'TagController@show');数组来填充options元素的select：

$tags

如何根据选项中的当前选定标记更改表单操作？

我使用Vue.js作为js框架，我正在监听<form id="tagForm" method="POST" action="/subjects/{{ $lesson->subject->slug }}/{{ 'selected option will go here' }}"> {{ csrf_field() }} <div class="select"> <select @change="onTagSelected"> <option>Tags</option> @foreach ($tags as $tag) <option value="{{ $tag->id }}">{{ $tag->title }}</option> @endforeach </select> </div> </form>事件：

onchange

Answer 1

我必须将select标记绑定到v-model属性：

<form id="tagForm" method="POST" action="/subjects/{{ $lesson->subject->slug }}/">
    {{ csrf_field() }}
   <div class="select">
      <select @change="onTagSelected" v-model="selectedTag">
        <option>Tags</option>
        @foreach ($tags as $tag)
            <option value="{{ $tag->id }}">{{ $tag->title }}</option>
        @endforeach
      </select>
    </div>
</form>

在我的事件监听器中，我将该属性附加到操作，然后提交它：

onTagSelected: function(event) {
        var tagForm = document.getElementById('tagForm');
        tagForm.action += this.selectedTag;
        // console.log(tagForm.action);
        tagForm.submit();
}

虽然这解决了我的问题，但我不满意。我认为有更好的方法来做到这一点。请随意分享这种情况下的最佳解决方案。

Answer 2

你解决它的方式，你并没有真正使用VueJS，平面的javascript会更有意义。更多的VueJS方法是这样的:(假设你是在Blade View中写的，这需要在a）中

new Vue({
   data: function() {
      return {
         form: {
             baseAction: "/subjects/{{ $lesson->subject->slug }}/",
             chosenAction: '',
         }
      }
   },
   computed: {
       computedAction: function() {
           return this.form.baseAction + this.form.chosenAction;
       }
   }
});

现在为你的表格：

<form action="computedAction">

对于你的选择：

<select v-model="form.chosenAction">

此处不需要onchange，因为我们将所选值绑定到chosenAction的{{1}}属性。然后我们使用form object属性（当然是计算值）来指示我们表单的操作。

编辑 - 对单个文件组件使用已转换的vuejs方法时：

如果您希望vuejs负责表单的生命周期，那么您可以使用单个文件组件：

computedAction

现在，在app.js文件中，您需要告诉Vue这个新组件，以便您可以在刀片模板中使用它。这需要在<template> <form id="tagForm" method="POST" action="computedAction"> <input type="hidden" name="_token" value="token"/> <div class="select"> <select v-model="form.chosenAction"> <option value="">Tags</option> <option v-for="tag in tags" value="tag.id"> {{tag.title}} </option> </select> </div> </form> </template> <script> export default { props: ['tags', 'slug', 'token'] data: function() { return { form: { chosenAction: '' } } }, computed: { computedAction: function() { return `/subjects/${slug}/${this.form.chosenAction}` } } } </script>文件中使用import Vue from 'vue'之后。

app.js

现在，在您的刀片模板中，您可以将属性传递给此组件：

import MyCoolForm from './path/to/my/cool/form.js';

Vue.component('v-mycoolform', MyCoolForm);

如何使用Laravel + VueJS动态更改表单操作

2 个答案: