구성 요소없이 소품 사용

VueJS를 사용 중이며 Laravel 서버에서 VueJS로 전달되는 변수를 전달하려고합니다. 여기 구성 요소없이 소품 사용

내 코드입니다 :

<div v-for="team in championships.find((elem) => elem.championship == {{ $championship->id }}).teams" 
       v-cloak 
       :championship= {{ json_encode($championship) }} >

VUE에서 현재의 우승과 더불어, 뷰 개체라는 이름의 우승이 나에게 중요하다, 그래서 내가 할 수와 팀 루프 :

<div v-for="team in championship.teams" ... >

하지만 구성 요소에서 props과 함께하는 방법을 알고 있지만 소품없이 Vue에서 우승 개체를 얻는 방법을 모르겠습니다. data에, 나는 그것을 작동하게 만들 수 없습니다.

아이디어가 있으십니까? 당신의 <head> 태그 내부

출처

2017-10-13 Juliatzin del Toro

은 다음과 같이 윈도우 객체에 "챔피언"속성을 추가

data: { 
    championship: championship 
}

: 당신의 뷰 인스턴스 데이터에 다음

<script> 
window.championship = {{ $championship }}; 
</script>

은 이전에 정의 된 속성에 "챔피언"을 정의하는 객체

출처

2017-10-14 01:48:19 enriqg9

네, 저도 그렇게 할 수 있다는 것을 알고 있지만, 그렇게 깨끗하지는 않은 것 같습니다. 나는 전에 그것을하고 있었지만'v-bind '를 사용할 수 있기를 희망했습니다. 내가 그 해답을 읽을 때 그것은 불가능한 것처럼 보인다. –

@JuliatzindelToro 작은 변수에 대해서는이 작업을 수행합니다. 그러나 많은 양의 데이터에 대해서는 백엔드에 항상 Ajax 요청을하여 데이터를 가져올 수 있습니다. – enriqg9

저는 Laravel을 API 서버로 만들고 응용 프로그램을 "SPA"로 만드는 것이 훨씬 쉽다고 생각합니다. 당신이 당신의 객체를 포함 할 때

어쨌든은 Vue.js 템플릿 문법 만

중 하나

Vue.component('someComponent',{ 
    template: `<h1>Hello</h1>` 
})

또는

<template> 
    <h1>Hello</h1> 
</template> 
<script> 
    export default { 
    name: 'hello', 
    ... 
    } 
</script>

그래서 뭔가를 할 예정 뷰의 인스턴스로 작동 할 수 직접 템플릿을 Vue 스타일로 작성해도 효과가 없습니다. 그러나 여전히 $championship을 javascript 변수로 전면에 전달하고 vue.js를 사용하여 데이터를 렌더링 할 수 있습니다.

<html> 
    <body> 
    <div id="app"></div> 
    </body> 
    <script> 
    var championComponent = Vue.component({ 
     template: ` 
     <div v-for="team in championship.teams"> 
      <span>{{ team }}</span> 
     </div> 
     `, 
     data: function() { 
     return { 
      championship: {{ json_encode($championship) }} // parse your champion data here 
     } 
     } 
    }); 
    var app = new Vue({ 
     el: "#app" 
    }); 
    </script> 
</html>

행운을 빈다!

출처

2017-10-14 02:10:03 daiyanze

mmm. 훨씬 쉬워, 나도 몰라,하지만 많은 일, 예. 모든 인증, 역할, 번역, 경로 등을 마이그레이션해야합니다. 의심의 여지없이 큰 개선이 될 수 있지만 작업이 많으므로 올바른 단어가 아닐 수도 있습니다. –

$ 챔피언 변수를 앞쪽으로 전달하는 방법에 대해 아주 명확합니다. Vue 스타일의 html 태그를 템플릿 파일에 직접 쓰는 방법은 없습니다. – daiyanze

구성 요소없이 소품 사용

답변

관련 문제