vue.js 동적 행이 작동하지 않는 실시간 양식

안녕하세요. 스태커가 계시 며, 저는 전체 프로젝트에서 진행 상황을 말 그대로 멈추는 문제에 직면했습니다.vue.js 동적 행이 작동하지 않는 실시간 양식

하자. 무엇을해야합니까?

기본적으로 레이블 및 내부 이름을 말하는 동적 양식이 있습니다. 섹션에 새로운 레이블 및 내부 이름 입력을 추가하기 위해 추가 버튼을 클릭 할 수있는 부분이 있습니다. 단 1 부분이었습니다.

2 부는 내부 이름 입력이 독립적으로 채워지지 않는다는 것입니다. 그것은 라벨에 입력 된 정보를 취하기로되어있는 실시간 양식입니다. 그래서 라벨에 "Hello world"라고 입력하면 자동으로 내부 이름 입력 상자에 "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/[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']) !!}

출처

2016-10-20 Justin Boxem

는, 당신이 컴포넌트 1 "에 입력 데이터 같은 소리 "자동으로" Component2 "- 당신의 바이올린에서. 문제가 무엇이고 어떻게 일을하고 싶은지 정확히 설명해 주시겠습니까? – PatrickSteele

예, 현재 페이지 http://prntscr.com/cwnipi를 알려드립니다. 지금까지 문제는 구성 요소가 나타나지 않아서 작동하지 않는다는 것입니다 (논리적으로 보일 수도 있음). 결국 내 목표는 라벨과 내부 이름 필드가있는 새 행을 추가 할 수있는 추가 버튼입니다.내부 이름의 값은 레이블 상자에 무언가가 입력 될 때 자동으로 "입력"됩니다. 마지막으로 중요한 것은 속한 관련 테이블 행을 제거하는 제거 버튼입니다. –

좋아요. 상황에 대한 업데이트를 제공하십시오. JSFiddle에서 약간 작업했는데 이것이 결과입니다.

이제 JSFiddle에서 잘 작동합니다. 내 브라우저에서 레이블에 입력하는 동안 키보드의 키를 누를 때마다 Vue.js 경고가 표시됩니다. 그 모양은 다음과 같습니다 : http://prntscr.com/cwp56f. 이 코드 조각과

JSFiddle :https://jsfiddle.net/epdo2prz/

VIEW

<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 
} 
});

출처

2016-10-20 14:26:57

http://archive.forum.vuejs.org/topic/4669/dealing-with-the-mutating-props-anti-pattern/2 –

vue.js 동적 행이 작동하지 않는 실시간 양식

답변

관련 문제