Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【BUG】Vue3的 v-bind 在小程序中失效,Bug是真的多😤 #3887

Closed
Michael-py001 opened this issue Sep 26, 2022 · 4 comments
Closed
Assignees
Labels
bug Something isn't working mp mini program vue3

Comments

@Michael-py001
Copy link

Michael-py001 commented Sep 26, 2022

问题描述
前几天才提了个v-bind的bug #3884 ,今天又给我遇到bug了,直接给我整无语了,这是要我一个个给你们提Bug才能用这uniapp了吗?

<sctipt>
  export default {
   data() {
     return {
        color:'red'
     }
   }
 }
</script>
<style lang="scss">
  .test {
    colot: v-bind(color)
  }
</style>

使用的是data里的变量,然后在小程序就不生效了,H5就生效。
如果是用script setup语法就正常。


经过多次重新编译,发现在后面运行中就恢复了正常,又是一个不知道怎么触发了的bug。时好时坏

系统信息:

  • HBuilderX版本 3.6.3.20220919-alpha
@fxy060608 fxy060608 self-assigned this Sep 27, 2022
@fxy060608 fxy060608 added vue3 mp mini program bug Something isn't working labels Sep 27, 2022
fxy060608 added a commit that referenced this issue Sep 27, 2022
@chrdwhdhxtszpzclljxk
Copy link

colot

@Michael-py001
Copy link
Author

@fxy060608 刚刚已经复现了,如果只用vue2的<sctipt></sctipt>,那么在这里面的属性都不会生效,只有加上了以下一组标签才会生效,且里面必须有内容,有一行注释也行,如果没有内容则一样不生效:

<sctipt setup>
//必须要有内容才生效
</sctipt>

@femaimi9527
Copy link

femaimi9527 commented Nov 25, 2022

并不是啊,我用vue3,用 <script setup> ,一样不生效,用的 HbuilderX 3.6.10.20221121-alpha这个版本,隐约记得是前天升级了一个版本后就不行了。
image

<script setup>
import { reactive, computed } from 'vue';
/*
* @description 自定义标签
* @property {string} props.tagLabel 标签文字
* @property {string} props.tagLabelColor 标签文字颜色
* */

const props = defineProps({
  // 标签文字
  tagLabel: {
    type: String,
    default: '官方'
  },
  // 标签文字颜色
  tagLabelColor: {
    type: String,
    default: '#E53935'
  },
  // 标签背景颜色
  tagBgColor: {
    type: String,
    default: '#fff'
  },
  // 标签边框样式
  tagBorder: {
    type: String,
    default: '2rpx solid #E53935'
  },
  // 标签宽度
  tagWidth: {
    type: String,
    default: '60rpx'
  },
  // 标签圆角
  tagBorderRadius: {
    type: String,
    default: '4rpx'
  },
})
const theme = reactive({
  tagLabelColor: props.tagLabelColor,
  tagBgColor: props.tagBgColor,
  tagBorder: props.tagBorder,
  tagWidth: props.tagWidth,
  tagBorderRadius: props.tagBorderRadius
})
const theTagLabel = computed(() => props.tagLabel)
</script>

<template>
  <view class="basic">
    <text>{{ theTagLabel }}</text>
  </view>
</template>


<style scoped>
.basic {
  height: 36rpx;
  min-width: v-bind('theme.tagWidth');
  color: v-bind('theme.tagLabelColor');
  background: v-bind('theme.tagBgColor');
  border: v-bind('theme.tagBorder');
  border-radius: v-bind('theme.tagBorderRadius');
  font-weight: 600;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

@sangguanghui
Copy link

app中不生效呀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working mp mini program vue3
Projects
None yet
Development

No branches or pull requests

5 participants