This 'v-if' should be moved to the wrapper element

v-if를 해당 요소를 감싸는 상위 요소로 이동시켜 적용하라는 메시지가 함께 표시되고 있다.

☝ 방법1 ) v-if와 v-for 부분을 분리

v-if와 v-for 부분을 분리하니까 에러가 깨끗하게 해결됐다.

어찌보면 가장 간단하고 근본적인 해결책같지만, 계획에 없던 불필요한 코드가 추가된다는 단점이 있다. 😇

✌️ 방법2 ) eslintrc.js에 vue/no-use-v-if-with-v-for 추가

나처럼 eslintrc.js파일이 없는 경우에 아래 명령어로 먼저 설치해야 한다.

echo. > .eslintrc.js

그런데 eslint는 es6를 사용할 경우 에러가 날 수 있다고 한다..!

추가하자마자 갑자기 Parsing error 라고 하면서 엄청난 양의 에러가 뜬다.... (으잉 😧 ❓)

폭풍 구글링을 한 결과, eslint-parser 설치해주고

eslintrc.js 파일에 아래처럼 작성해주고 나니 해결되었다.

// babel-eslint 설치
npm i @babel/eslint-parser

module.exports = {
    root: true,
    env: {
        "browser": true,
        "commonjs": true,
        "node": true
    extends: [
    	"eslint:recommended", "plugin:vue/essential" // extends 안에 해당 해용추가
    parserOptions: {
        parser: "babel-eslint"
    rules: {
        "vue/no-use-v-if-with-v-for": "off"
💕찐해결 인증💕
v-if랑 v-if 한 엘리먼트에 같이 쓰고도 에러가 발생하지 않는다.
      [동일 라우터 중복 요청에러] NavigationDuplicated: Avoided redundant navigation to current location  (0)
      2023.08.24
      [Vue router 설치 에러] unable to resolve dependency tree  (1)
      2023.08.24
      [카카오맵API] parser-blocking 경고  (0)
      2023.08.24