#html #laravel #vue.js #blade
#HTML #laravel #vue.js #laravel-blade
Вопрос:
Привет, коллеги-укладчики, недавно я столкнулся с проблемой, которая буквально останавливает мой прогресс во всем проекте.
Давайте перейдем к этому; Что нужно сделать?
В принципе, у меня есть динамическая форма с надписью Label и внутренним именем. У меня готов раздел, в котором вы можете нажать кнопку добавить, чтобы добавить новую метку и внутреннее имя, введенные в таблицу, однако это была только часть 1.
Часть 2 заключается в том, что ввод внутреннего имени не заполняется независимо; это форма реального времени, которая должна принимать входные данные, помещенные в label. Итак, если я наберу «Hello world» в label, во внутреннем поле ввода имени автоматически также должно появиться «hello world», если я вообще там не набирал.
Как только я начал объединять два 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/vue@next/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. Из вашего описания похоже, что данные, которые вы вводите для «Component1», должны быть автоматически установлены в «Component2» — что он и делает в вашей скрипке. Не могли бы вы уточнить, в чем именно проблема и как вы хотите, чтобы все работало?
2. Да, позвольте мне поделиться с вами текущей страницей: prntscr.com/cwnipi . Проблема до сих пор заключается в том, что компоненты не отображаются, поэтому она не работает (как может быть логично видеть). В конце концов, моя цель — создать кнопку добавления, в которую можно добавить новую строку с меткой и внутренним полем имени. Значение внутреннего имени автоматически «вводится», когда что-то вводится в поле метки. И последнее, но не менее важное: есть кнопка удаления, которая удалит связанную строку таблицы, к которой она принадлежит.
Ответ №1:
Хорошо, я хочу предоставить обновленную информацию о ситуации; Я немного поработал в JSFiddle, и вот результат:
Теперь в JSFiddle она работает нормально; в моем браузере я получаю Vue.js предупреждения всякий раз, когда я нажимаю клавишу на клавиатуре при вводе в Label. Это выглядит так:http://prntscr.com/cwp56f .
JSFiddle с этими фрагментами кода: https://jsfiddle.net/epdo2prz /
Вид
<div id="app">
<table class="table">
<thead>
<tr>
<td><strong>Label</strong></td>
<td><strong>Internal Name</strong></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td><comp1 :prop.sync="input"></comp1></td>
<td><comp2 :prop.sync="input"></comp2></td>
<td><a @click="removeRow(row)">Remove</a></td>
</tr>
</tbody>
</table>
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>
Модель
var Component1 = Vue.extend({
template: '<input type="text" v-model="prop"/>',
props: ['prop']
})
var Component2 = Vue.extend({
template: '<input type="text" v-model="prop"/>',
props: ['prop']
})
var app = new Vue({
el: "#app",
data: {
rows: [
{label: "",internal_name: ""}
]
},
methods:{
addRow: function(){
this.rows.push({label:"",internal_name:""});
},
removeRow: function(row){
//console.log(row);
this.rows.$remove(row);
}
},
components: {
'comp1': Component1,
'comp2': Component2
}
});