v-if在插槽中使用出现未知问题,请大家帮忙指点下,非常感谢!

具体使用代码如下

v-if在插槽中使用出现未知问题,请大家帮忙指点下,非常感谢!

想要实现的功能:
v-if中的值为true时,功能正常实现(图片和span标签中的内容均在页面上出现),而为false时,图片不显示,span标签中的内容显示。
遇到的问题:
v-if中的值为true时,功能正常实现,为false时,图片和span中的内容均不显示了(在调试器中可以看到img和span两个dom均未生成)。当用div标签把img和span包裹起来,或者只包裹img标签,v-if值为false时,功能就正常实现了,即img不显示,而span中的内容显示。
说明:
按照截图上的代码项目之前能正常使用,中间我做过npm update操作,packge.json文件始终没有更改,只有packge-lock.json文件发生了更改,然后就出现上述问题,页面显示错误。自己研究了很久也查阅了相关资料,但还是没有弄清楚到底是不是npm update的原因以及为什么会出现这样的问题,还请大家帮我看一下,指点一下我,非常感谢!

最佳答案

问题已经解决,应该是某个依赖包更新后导致的。我之前升级了node.js版本,然后发现项目启动不了,做了npm update操作,项目可以启动了,但没想到引发了这样奇奇怪怪的问题。我把node.js和package-lock.json文件还原到之前版本后就正常了。但依然不清楚是哪个依赖包更新后引起的问题。

2年前 评论
讨论数量: 3

做了下测试,并没有发现这种问题,结果符合预期的,建议调试下那个 props.obj 是否正确,我的 package.json 如下:

{
  "name": "untitled",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

App.vue

<template>
  <div id="app">
    <test-scope>
      <template slot="header" slot-scope="p">
        {{p.row.id}} - {{p.row.name}}

        <img v-if="p.row.id === 1" src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg" alt="">
        <span v-else>no pic</span>
      </template>
    </test-scope>
  </div>
</template>

<script>
import TestScope from "./components/TestScope"

export default {
  name: 'App',
  components: {
    TestScope
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components/TestScope.vue

<template>
  <div>
    <slot name="header" :row="row"></slot>
  </div>
</template>

<script>
export default {
  name: "TestScope",
  data() {
    return {
      row: {
        id: 1,
        name: "test user",
      }
    }
  }
}
</script>

<style scoped>

</style>
2年前 评论
lmxxz_xyw (楼主) 2年前

问题已经解决,应该是某个依赖包更新后导致的。我之前升级了node.js版本,然后发现项目启动不了,做了npm update操作,项目可以启动了,但没想到引发了这样奇奇怪怪的问题。我把node.js和package-lock.json文件还原到之前版本后就正常了。但依然不清楚是哪个依赖包更新后引起的问题。

2年前 评论

2.6.0之后的slot插槽废弃了之前的slot_scope形式,该用-v-slot形式,猜测可能升级后的版本不兼容老版本,你检查一下,代码逻辑目前看不出来错误

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!