0
こんにちは、私は最近、文字通りプロジェクト全体の進捗状況を停止しているという問題に遭遇しました。vue.js動的な行で動作しないリアルタイムフォーム
それに行きましょう。何をする必要がありますか？
基本的に、ラベルと内部名という動的なフォームがあります。私はセクションを用意して、追加ボタンをクリックしてテーブルに新しいラベルと内部名の入力を追加することができますが、それはちょうどパート1でした。
パート2では、内部名の入力は独立して行われません。それはラベルに入れられた入力を取ることになっているリアルタイム形式です。だから私がラベルに "Hello world"と入力すると、そこに入力しなくても自動的に内部名入力ボックスに "hello world"があるはずです。
2つのvue.jsの組み合わせを開始するとすぐに、問題が発生し始めました。これらのフィドルは以下のとおりです。
ダイナミック形式：https://jsfiddle.net/7nxhygLp/
リアルタイム形式：https://jsfiddle.net/gtmmeak9/118/
ここでは、それが表示されている私のページのHTMLコードを=
（vue.jsを含み）であります========================================== ======
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>M06 Property-create</title>
<!-- Including nessecary javascript sources -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
{!! Form::open(array('route' => 'property.store')) !!}
@include('properties.form')
{!! Form::close() !!}
<a href="/property">Return</a>
<script> //This script handles the adding/removal of label/text fields upon clicking the add label/remove label button
var Component1 = Vue.extend({
template: 'Component 1: <input type="text" v-model="prop"/>',
props: ['prop']
});
var Component2 = Vue.extend({
template: 'Component 2: <input type="text" v-model="prop"/>',
props: ['prop']
});
var app = new Vue({
el: "#app",
data: {
rows: [
{label: "", internal_name: ""}
]
},
components: {
'comp1': Component1,
'comp2': Component2
}
methods: {
addRow: function() {
this.rows.push({label: ""});
},
removeRow: function (index) {
//console.log(index);
this.rows.splice(index, 1);
}
}
});
</script>
</body>
</html>
======================================= =========
そして、ここでは、この時点で
が壊れていることを含める形で===================です=====================
{!! Form::label('field_type_id', Lang::get('misc.fieldtype_name')) !!}
{!! Form::select('field_type_id', $fieldTypes) !!}
<br>
<div class="dropdown box">
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div id="app">
<table class="table">
<thead>
<br>
<button type="button" class="button btn-primary" @click="addRow">Add label</button>
<br>
<tr>
<br>
<td><strong>Label</strong></td>
<td><strong>Internal Name</td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows">
<td><input name="label" id="label" type="text" v-model="row.label"></td>
<td><input name="internal_name" id="internal_name" type="text" v-model="row.internal_name"></td>
<td><button type="button" class="button btn-primary" @click="removeRow(index)">Remove</button></td>
<td><comp1: prop.sync="input"></comp1></td>
<td><comp2: prop.sync="input"></comp2></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
{!! Form::label('property_group_id', Lang::get('misc.group_name')) !!}
{!! Form::select('property_group_id', $groups) !!}
<br>
{!! Form::label('description', Lang::get('misc.description')) !!}
{!! Form::textarea('description', null, ['class' => 'form-control', 'required']) !!}
<br>
<br>
{!! Form::submit(Lang::get('misc.save'), ['class' => 'btn btn-success', 'id' => 'btn-save']) !!}
あなたの説明から、それはあなたがコンポーネント1「を入力したデータのように聞こえます"は自動的に"コンポーネント2 " - それはあなたのフィドルで行います。あなたは問題が何であり、どのように物事を働かせたいのかを正確に明確にすることができますか？ – PatrickSteele
はい、私はあなたに現在のページを共有させてください：http://prntscr.com/cwnipi。これまでのところ、コンポーネントは表示されないため、（見た目は論理的かもしれないが）機能していないという問題があります。最後に私の目標はラベルと内部名フィールドを持つ新しい行を追加できる追加ボタンです。内部名の値は、何かがラベルボックスに入力されたときに自動的に "タイプ"されます。最後に、それが属する関連するテーブル行を削除する削除ボタンがあります。 –