Question

我有javascript和vue.js的问题，它应该很简单但不是，我不明白为什么我不能用javascript设置元素的高度。这是我尝试更改高度后得到的错误 - 未捕获的TypeError：无法读取属性＆＃39; style＆＃39;为null

<template>
<div class="Icontent" id="Icontent" v-bind:mode="this.mode">Content {{this.mode}} </div>
</template>

<script>
    export default {
      name: "Icontent",
      props:['mode'],
      created:function(){
          created(this);
      },
      data:function(){
        return{
           mode:this.mode
        }
      }
    }

    function created(component){
        //document.getElementsByClassName('Icontent').style.height = 100;
        //document.getElementById('Icontent').setAttribute("style","height:" + 100);

    }
</script>

<style scoped>
.Icontent{
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 2px #09f;
}

.Icontent[mode="mobile"]{
  top: 0;
}
</style>

Answer 1

请勿将created功能命名为与vuejs lifecycle function相同。
无需在导出之外声明它，将其放在methods中，如下所示：

methods: { init: function() { //code goes here } }
document.getElementsByClassName不会返回节点的实例，因此您无法以这种方式设置样式。你必须先循环所有元素。
您可以在style函数中将data定义为对象，并使用:style="someStyleObject"
如果mode中的data属性，则无法定义<uses-permission android:name="android.permission.INTERNET" />。
检查您的控制台，您将会遇到错误。

Vue.js和javascript无法正常工作

1 个答案: