구문 오류:Vue js에 예기치 않은 토큰 }이(가) 있음

구문 오류:Vue js에 예기치 않은 토큰 }이(가) 있음

코드는 다음과 같습니다.

<multiple-photo-product :product="{{ isset($product) ? $product : '' }}"></multiple-photo-product>

코드가 실행되면 다음 오류가 발생합니다.

구문 오류:에 예기치 않은 토큰이 있습니다.

하지만 코드가 이렇다면:

 <multiple-photo-product product="{{ isset($product) ? $product : '' }}"></multiple-photo-product>

오류가 발생하지 않습니다.

덧붙이다:데이터가 개체로 전송되도록 합니다.

사용하지 않는 경우:데이터는 문자열로 전송됩니다.

어떻게 하면 해결할 수 있을까요?

문제는 만약 php 변수가$product설정되어 있지 않다(즉, 와 같다).null또는""그러면 Vue는 프로펠러를 바인드하려고 합니다.:product와 함께''결과적으로 에러가 발생합니다(예를 들어, 에러를 발생시키는 것).:product=""바인드)

다음을 시도해 보십시오.

<multiple-photo-product :product="{{ isset($product) ? $product : '""' }}"></multiple-photo-product>

큰따옴표 주의""작은 따옴표로 둘러싸여 있습니다.이것은 Vue에게 바인드하도록 지시합니다.productphp의 경우 빈 문자열로 프로포트를 만듭니다.$product변수가 설정되지 않았습니다.

이쪽도 봐주세요.도움이 될 거예요.기억해야 할 중요한 점은 이다.v-bind유효한 javascript 표현식, 즉 보간된 값(예: 블레이드의 곱슬곱슬한 괄호 안에 있는 값)이 필요합니다.{{}})도 유효한 javascript 식이어야 합니다.

VueJS2의 Atribute 속성은:필요 없다{{ }}당신의 경우 삼진법은 다음과 같습니다.

<multiple-photo-product product="isset($product) ? $product : ''"></multiple-photo-product>

출처 : https://vuejs.org/v2/guide/syntax.html#Attributes

HTML 특성 내에서 콧수염을 사용할 수 없습니다. 대신 v-bind 지시문을 사용하십시오.

언급URL : https://stackoverflow.com/questions/45003899/syntaxerror-unexpected-token-in-vue-js