중첩 된 vue 인스턴스가 계산되지 않음 반환 : 함수 값

Question

저는 나뭇 가지를 사용하고 있고베이스에 body 태그 바로 뒤에있는 섹션 인 #app에 모든 것을 할당하는 새로운 Vue 인스턴스가 있습니다.

users.html 페이지에서이 base.twig를 확장하여 base.twig에 동일한 코드를 사용할 수없는 이유는 일부 데이터가 사용자 컨트롤러의 vue로 전달되기 때문에 얻을 수 있습니다. 사용자 데이터가 설정되지 않았기 때문에 다른 페이지의 오류.

이

내가 가지고

new Vue({ 
    el: '#app', 
    data: { 
     hideNav: false, 
     userMenuDropdown: false, 

     showModal: false 
    } 
}); 

그리고 내 users.html에서 내 base.twig에있는 것입니다 : 나는 단순히 검색하기 위해 노력하고있어

var UsersPage = new Vue({ 
    el: '.users__main', 
    data: { 
     search_users: '', 
     users: {{ users|raw }} 
    }, 
    computed: { 
     filteredUsers, 
    } 
}); 

function filteredUsers(){ 
    var self = this; 
    return this.users.filter(function(cust){ 
     return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0; 
    }); 
} 

사용자라면 # . users__main이 아닌 #app을 참조하는 첫 번째 인스턴스를 제거하면 모든 것이 작동합니다.

내가 설정 더 정확한 문제를 설명하는 jsfiddle을 가지고 this version (작동하지 않는)가 VUE 인스턴스의 base.twig의 하나는 user.html 파일의 다른 this version 모두 두 인스턴스가 포함되어 있지 않습니다 (공장).

나는 이것에 대한 구성 요소를 망치고 있었지만 나는 그렇게 할 수 없었다.

Answer 1

문서를 읽은 후에 알아낼 수 있었지만, inline-template으로 구성 요소를 사용하여 권선했습니다.

내 base.twig에 Vue 인스턴스가 하나만 생성됩니다.

new Vue({ 
    el: '#app', 
}); 

그리고

이제 base.twig를 확장 내 user.html 파일에 난 구성 요소를 만들었습니다.

이 부분은 구성 요소이며 jsfiddle 예제에서 제공 한 검색 기능을 사용하는 데 사용 된 방법입니다.

Vue.component('user-search', { 
    data: function() { 
     return { 
      search_users: '', 
      users: {{ users|raw }} // this here is json_encoded data from twig passed from the php framework controller 
     } 
    }, 
    computed: { 
     filteredUsers, 
    } 
}); 

function filteredUsers(){ 
    var self = this; 
    return this.users.filter(function(cust){ 
     return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0; 
    }); 
} 

그리고 (내 코드를 기반으로 사용하는 방법을 보여주는) 구성 요소를 사용하기 :

당신은 보간`사용자를 사용할 수 없습니다

<user-search inline-template> 
    <input type="text" v-model="search_users"> 
    <!-- rest of the code with the for loop --> 
</user-search>