Question

我遇到了一些非常奇怪的类型错误，这些错误非常模糊，并阻止了我的网页的呈现，有谁能更好地使用vue.js / html / CSS来帮助我？谢谢

我在chrome开发工具中的控制台中收到以下错误...

无法读取未定义的属性“ main”
未捕获到的SyntaxError：意外令牌{

vue.js：1743 TypeError：无法读取未定义的属性'dt_txt'

天气应用

<body>

    <div id='app'>
        <h1>Today's Weather</h1>
        <h2 class="flex-container">
            <span>Today: {{forecast[0].dt_txt}} </span>
            <span>Temperature: {{forecast[0].main.temp}} F</span>
            <span>Sky Conditions: {{forecast[0].weather[0].description}}</span>
            <span>Humidity: {{forecast[0].main.humidity}}</span>
            <span>Pressure: {{forecast[0].main.pressure}}</span>
        </h2>

        <h1>Five Day Forecast</h1>
        <h2 class="flex-container">
            <fpan class="forecast-container-default" v-for="index in 39" :key="index" v-bind:id="giveID(index)" v-on:click="changeColor($event, index)">
                    <tpan>Day: {{forecast[index].dt_txt}} </tpan>
                    <tpan>Temperature: {{forecast[index].main.temp}} F</tpan>
                    <tpan>Sky Conditions: {{forecast[index].weather[0].description}}</tpan>
                    <tpan>Humidity: {{forecast[index].main.humidity}}</tpan>
                    <tpan>Pressure: {{forecast[index].main.pressure}}</tpan>
            </fpan>
        </h2>
    </div>



    <script src="https://unpkg.com/vue"></script>
    <script src="style.css"></script>
    <script>


        const app = new Vue({
            el: '#app',
            data: {
            zip: "",
            id: "",
            ip: "",
            forecast: "",
            isActive: false              
        },
        methods: {
            changeColor : function(event, id) {
                console.log(id);
                document.getElementById(id).style.backgroundColor = "lightyellow";
                return document;
            },
            giveID : function(index) {
               return String(index);                                    
            },

        },
        created () {
            url = "http://api.ipstack.com/"

            fetch("http://api.ipstack.com/24.11.12.118?access_key=74dd3f021bba199c25e59418416fc4bd")
            .then(response => response.json())
            .then(json => {
            this.zip = json.zip
            this.ip = json.ip
            })
        },

        created () {
            url = "https://api.openweathermap.org/data/2.5/forecast?APPID=cd3f3e553d9d58b1125ce354b20bca30&units=imperial&zip=84321"
            console.log(this.zip)
            fetch(url)
            .then(response => response.json())
            .then(json => {
                console.log(this.zip)
                this.forecast = json['list']

            })
        },     

    })
</script>
</body>

CSS文件

html {
    background-color: beige;
}

head {
    vertical-align: 5px;
}

h1 {
    font-style: oblique;
    margin-left: 20px;
    text-align: center;
}

h2 {
    border: 5px;
    border-color: black;
    font-family: 'Courier New', Courier, monospace;
    display: inline-flex;
}

h2 span {
    display: block;
    padding: 5px;
}

h2 tpan {
    display: block;
    padding: 5px;
}

h2 fpan {

    width: fit-content;
    display: inline-flex;
    padding: 5px;
}
#id{
    font-weight: bolder;
}

tr > td {
    font-size: 20px;
}



.forecast-container-default{
    display: inline-flex;
    flex: 3;
    font-size: 10px;
    flex-direction: row;
    background-color: whitesmoke;
    border-color: black;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;
    flex-wrap: nowrap;  
}

.forecast-container-likely{
    display: inline-flex;
    flex: 3;
    font-size: 10px;
    flex-direction: column;
    background-color: lightgreen;
    border-color: black;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;
    flex-wrap: wrap;  
}

.forecast-container-unlikely{
    display: inline-flex;
    flex: 3;
    font-size: 10px;
    flex-direction: column;
    background-color: lightyellow;
    border-color: black;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;
    flex-wrap: wrap;  
}


.flex-container {
    display: flex;
    flex: 3;
    flex-direction: row;
    background-color: aqua;
    border-color: black;
    border-radius: 5px 5px 5px 5px;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;
    flex-wrap: wrap;
}

这也是我正在使用的api模型。

{“城市”：{“ id”：1851632，“名称”：“ Shuzenji”， “ coord”：{“ lon”：138.933334，“ lat”：34.966671}， “ country”：“ JP”， “ cod”：“ 200”， “邮件”：0.0045， “ cnt”：38， “列表”：[{ “ dt”：1406106000， “主要”：{ “ temp”：298.77， “ temp_min”：298.77， “ temp_max”：298.774， “压力”：1005.93， “ sea_level”：1018.18， “ grnd_level”：1005.93， “湿度”：87， “ temp_kf”：0.26}， “ weather”：[{“ id”：804，“ main”：“ Clouds”，“ description”：“阴云”，“ icon”：“ 04d”}]]， “ clouds”：{“ all”：88}， “ wind”：{“ speed”：5.71，“ deg”：229.501}， “ sys”：{“ pod”：“ d”}， “ dt_txt”：“ 2014-07-23 09:00:00”} ]}

Answer 1

让我们解决这些错误。

无法读取未定义的属性“ main”

根据您的模板，此错误正在此处

<span>Temperature: {{forecast[0].main.temp}} F</span>

forecast是什么？看起来应该是一个数组。看着您的data，forecast被初始化为空字符串。访问空字符串的[0]是未定义的，因此，您无法读取未定义的属性“ main”。调整数据或模板以容纳空数据。

未捕获到的SyntaxError：意外令牌{

Idk这是什么，但是它应该告诉您行号。

vue.js：1743 TypeError：无法读取未定义的属性'dt_txt'

与第一个要点相同的原因。

我通常通过在加载/加载状态之间切换来处理空数据。这是一个最小的例子。

<body>

    <div id='app'>
        <h1>Today's Weather</h1>
        <div v-if="isLoading">
            // show loading icon, spinner, text, whatever 
         </div>
        <div v-else>
            // render the data 
            <h2 class="flex-container">
                <span>Today: {{forecast[0].dt_txt}} </span>
                <span>Temperature: {{forecast[0].main.temp}} F</span>
                <span>Sky Conditions: {{forecast[0].weather[0].description}}</span>
                <span>Humidity: {{forecast[0].main.humidity}}</span>
                <span>Pressure: {{forecast[0].main.pressure}}</span>
            </h2>

            <h1>Five Day Forecast</h1>
            <h2 class="flex-container">
                <fpan class="forecast-container-default" v-for="index in 39" :key="index" v-bind:id="giveID(index)" v-on:click="changeColor($event, index)">
                        <tpan>Day: {{forecast[index].dt_txt}} </tpan>
                        <tpan>Temperature: {{forecast[index].main.temp}} F</tpan>
                        <tpan>Sky Conditions: {{forecast[index].weather[0].description}}</tpan>
                        <tpan>Humidity: {{forecast[index].main.humidity}}</tpan>
                        <tpan>Pressure: {{forecast[index].main.pressure}}</tpan>
                </fpan>
            </h2>
        </div>
    </div>



    <script src="https://unpkg.com/vue"></script>
    <script src="style.css"></script>
    <script>


        const app = new Vue({
            el: '#app',
            data: {
              isLoading: false,             
        },
        created () {
            this.isLoading = true

            url = "http://api.ipstack.com/"

            fetch("http://api.ipstack.com/24.11.12.118?access_key=74dd3f021bba199c25e59418416fc4bd")
            .then(response => response.json())
            .then(json => {
              this.zip = json.zip
              this.ip = json.ip
              this.isLoading = false
            })
            // make sure to catch any errors and turn off isLoading
            // or else you'll be loading forever. async/await makes
            // this easier since you can use try-catch-finally
        },


    })
</script>
</body>

使用vue.js单个网页获取类型错误

1 个答案: