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

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

javascript vue.js

Javascript 使用vue.js单个网页获取类型错误,javascript,vue.js,Javascript,Vue.js,我遇到了一些非常奇怪的类型错误，这些错误非常模糊，并且阻止了我的网页呈现，有谁能更好地使用vue.js/html/CSS来帮我解决吗？谢谢我在chrome开发工具的控制台中收到以下错误无法读取未定义的属性“main” 未捕获的语法错误：意外标记{ vue.js:1743 TypeError:无法读取未定义的属性“dt_txt” 天气应用程序这里还有我正在使用的api模型 {“城市”：{“id”：1851632，“姓名”：“Shuzenji”， “坐标”：{“lon”：138.933

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

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

无法读取未定义的属性“main”
未捕获的语法错误：意外标记{

vue.js:1743 TypeError:无法读取未定义的属性“dt_txt”

天气应用程序

这里还有我正在使用的api模型

{“城市”：{“id”：1851632，“姓名”：“Shuzenji”， “坐标”：{“lon”：138.933334，“lat”：34.966671}， “国家”：“JP”， “cod”：“200”， “消息”：0.0045， “cnt”：38， “名单”：[{ “dt”：1406106000， “主要”：{ “温度”：298.77， “最低温度”：298.77， “最高温度”：298.774， “压力”：1005.93， “海平面”：1018.18， “grnd_水平”：1005.93， “湿度”：87， “temp_kf”：0.26}， “天气”：[{“id”：804，“main”：“Clouds”，“description”：“Clouds”，“icon”：“04d”}]， “云”：{“全部”：88}， “风”：{“速度”：5.71，“度”：229.501}， “sys”：{“pod”：“d”}， “dt_txt”：“2014-07-23 09:00:00”}

]}让我们看看错误

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

根据您的模板，此处将抛出此错误

温度：{{forecast[0].main.temp}}F

什么是

forecast

？它看起来应该是一个数组。查看

数据，forecast
初始化为空字符串。访问[0]
空字符串的属性未定义，因此无法读取未定义的属性“main”。请调整数据或模板以容纳空数据

未捕获的语法错误：意外标记{

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>


今天的天气
//显示加载图标、微调器、文本等
//渲染数据
今天：{{forecast[0].dt_txt}
温度：{forecast[0]。main.temp}}F
天空条件：{{预测[0]。天气[0]。说明}
湿度：{{预测[0].main.湿度}
压力：{forecast[0].main.Pressure}
五天预报
日期：{{预测[索引].dt_txt}
温度：{预测[索引].main.temp}}F
天空条件：{{预测[index]。天气[0]。说明}
湿度：{预测[索引].main.湿度}
压力：{预测[索引].main.Pressure}
const app=新的Vue({
el:“#应用程序”，
数据：{
孤岛加载：false，
},
创建（）{
this.isLoading=true
url=”http://api.ipstack.com/"
取回（“http://api.ipstack.com/24.11.12.118?access_key=74dd3f021bba199c25e59418416fc4bd")
.then（response=>response.json（））
。然后（json=>{
this.zip=json.zip
this.ip=json.ip
this.isLoading=false
})
//确保捕获任何错误并关闭isLoading
//否则您将永远加载。async/await使
//这很容易，因为您可以使用try-catch-finally
},
})
请创建一个最小的完整的可验证示例，展示整个堆栈跟踪中的问题。我认为this.isLoading=false
应该位于回调中。（在fetch（）
的then块中）否则我们仍然不能确定在呈现字段时是否获得了数据，你认为呢？
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;
}

<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>