小编red*_*ift的帖子

目前，我有我的控件集，因此用户可以切换他们想要查看的每个图层。但是，我不确定如何在我的 UI 中构建“所有图层关闭”和“所有图层开启”功能。我有超过 70 层，它可能会变得凌乱，因此为什么需要一个“主”开关。

演示小提琴在这里

我有一个 geojson 对象，我正在过滤它以在我的地图上显示标记，如下所示：

var myData = [{...}];

var airport = L.geoJson(myData, {
filter: function(feature) {
    switch (feature.properties.Subcategory) {
        case 'Airport': return true;
            break;
    }
},
 onEachFeature: onEachFeature
});

var heliport = L.geoJson(myData, {
  filter: function(feature) {
    switch (feature.properties.Subcategory) {
        case 'Heliport': return true;
            break;
    }
},
 onEachFeature: onEachFeature
});

...
...
...
and so on...

我想在地图页面的右上角放置一个按钮控件，如下所示：

<div id="toggle" style="display:none;">
Toggle all layers:
<button type="button" class="btn btn-link"     onClick="removeAllLayers()">OFF</button>
<button type="button" class="btn btn-link" onClick="addAllLayers()">ON</button>
</div> …

我有一个单页应用程序，该应用程序发出GET请求，并接收一个名为`offices'的对象数组，这些对象是办公室名称及其ID的列表，如下所示：

offices: [
      { office: "Blue", office_id: 1 },
      { office: "Orange", office_id: 2 },
      { office: "Red", office_id: 3 }
    ]

还有一个名为计算属性unresolvedIssuesGroupedByOffice，该属性返回如下数据：

{
   "Blue":[
      {
         "issue_id":"232121",
         "branch":"Blue"
      },
      {
         "issue_id":"231131",
         "branch":"Blue"
      }
   ],
   "Orange":[
      {
         "issue_id":"332111",
         "branch":"Orange"
      },
      {
         "issue_id":"333141",
         "branch":"Orange"
      }
   ],
   "Red ":[
      {
         "issue_id":"224444",
         "branch":"Red "
      },
      {
         "issue_id":"111111",
         "branch":"Red "
      }
   ]
}

然后，我的HTML模板将所有这些呈现到表中，如下所示：

<table style="width:100%">
      <tr>
        <th>Office</th>
        <th>Number of Unresolved Issues</th>
      </tr>
      <tr v-for="(issues, office) in unresolvedIssuesGroupedByOffice" :key="office">
        <td><router-link
                :to="{
                  name: 'unresolved-issues-by-office-list', …

是的，我有可怕的 CORS 问题（或者，至少看起来是这样）……我已经搜索并尝试了一些解决方案，但无济于事……

我使用 firebase 模拟器并在本地运行我的函数没有任何问题，但是当我部署该函数并尝试在本地主机客户端应用程序上使用 fetch() 发送 POST 请求时，我收到以下 CORs 浏览器控制台错误（它赢得了甚至无法访问服务器日志）：

Access to fetch at 'https://us-central1-XXXX.cloudfunctions.net/deleteAsset' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The FetchEvent for "https://us-central1-XXXXX.cloudfunctions.net/deleteAsset" resulted in a network error response: the promise was rejected.

Promise.then (async) …

Tailwind 使您可以在使用 Vite 设置的项目中轻松使用其 CSS，如您在此处看到的。

但是，Bootstrap 5 仅提供可用于Webpack 的信息。

我找不到任何关于如何使用 Vite 设置 Bootstrap 5 CSS 的信息。有人对如何使用 Vite 成功且最佳地设置 Bootstrap 5 有任何建议吗？我正在使用 Nuxt3，但使用哪个框架并不重要。

我有一个带有一系列复选框的 Vue 应用程序，当用户选择一个复选框时，这些复选框将项目添加到数组中。可以选择大约 6 个项目，但是，<div>如果选择了2 个特定项目，我需要透露一个：

如果检查所有元素，则示例数组：

["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"]

但是，如果 ONLYApples和Pears被选中 AND/OR 如果ApplesORPears被选中，我需要div在视图中为用户显示一组指令。

我试过这个，但没有用：

<div v-if="(selectedProducts.length <= 2) && ( selectedProducts.includes('Apples') || selectedProducts.includes('Pears') )">
...show mycontent...
</div>

在我的 vue 实例中，我已经启动了这样的数据：

data: {
    selectedProducts: []
}

编写此逻辑的正确方法是什么？在这种情况下我应该使用 array.every() 方法吗？谢谢你。

我使用默认的 CLI 设置使用 vue-cli 和 webpack-simple 设置了一个简单的项目，并确保在询问我是否要使用 SASS 时选择了“Y”。

一、文件夹结构图：

我main.scss在./src/scss目录中创建了一个文件，并在文件中添加了以下简单的 scss 语法：

$primary-color: rgb(173, 16, 16);

然后，在我的App.vue模板中，我是这样的：

<style lang="scss" scoped>

h1, h2 {
  font-weight: normal;
  color: $primary-color;
}

</style>

在我的main.js文件中，我确保像这样导入 main.scss 文件：

import './scss/main.scss'

运行时npm run dev，出现以下编译错误：

编译失败。

./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: 
undefined
        ^
      Undefined variable: "$primary-color".



    in D:\Users\medranns\Desktop\sasswebpack\src\App.vue (line 46, column 10)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-316 13:3-17:5 14:22-324
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

这是我的webpack.config.js …

我正在对应用程序执行我的第一个“移动优先”方法（通常从桌面开始，过去使用 CSS 媒体查询按我的方式工作），并想知道在当今响应式开发环境中处理以下场景的最佳方法是什么：

我有一个像这样的组件：

<b-form-spinbutton id="sb-vertical" v-model="value" inline></b-form-spinbutton>

我希望上面的组件仅在设备低于某个断点时显示（假设低于 720px）。

然后，任何大于我想显示以下组件的视口：

<b-form-spinbutton id="sb-vertical" v-model="value" vertical></b-form-spinbutton>

注意上面代码中的vertical和inline道具。

这些最好留给传统的 CSS 媒体查询，还是我们能够使用模板条件（即 v-if？等）。

我想我会达成共识，因为我将根据收到的对此问题的任何反馈从头开始构建我的应用程序。谢谢！

我有一个包含超过 2000 多个功能的 GeoJSON 对象，每个功能都属于一个类别（即“电气”、“军事”等）。总共有大约38个类别。

这是我的集合的架构示例：

{"type":"Feature","properties":{"category":"Electrical","Name":"Plant No 1"},"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}},{"type":"Feature","properties":{"category":"Electrical","Name":"Plane No 2"},"geometry":{"type":"Point","coordinates":[94.5703125,58.722598828043374]}},{"type":"Feature","properties":{"category":"Military","Name":"Base 1"},"geometry":{"type":"Point","coordinates":[104.4140625,62.91523303947614]}}

这是我遍历集合的 L.geoJson 函数：

var allPoints = L.geoJson(myCollection, {
    onEachFeature: function(feature, layer){
        layer.bindPopup(L.Util.template(popTemplate, feature.properties));
    },
    "stylel": function(feature){
        return { "color": legend[feature.properties.category]
    }
}}).addTo(map);

如何将每个category属性分配给我的 L.control 函数，以便用户可以打开/关闭集合中的各种类别？如果我将每个类别都设为一个数据集和一个单独的 geoJSOn 层，我就可以做到这一点，但是要完成所有 38 个类别的工作量太大了。

我的尝试：

L.control.layers({
    'Street Map': L.mapbox.tileLayer('mapbox.streets').addTo(map)
},{
    'Electrical': myCollection[feature.properties.category["Electrical"]],
    'Military': myCollection[feature.properties.category["Military"]]
});

有一个更好的方法吗？谢谢！

我正在使用 LeafletJs 和 D3js 将条形图放入 Leaflet 弹出窗口中。

如何为每个民族栏指定自定义颜色？我想在 D3 代码中分配自定义颜色，因为我无法修改原始数据集。关联

谢谢。

var onEachFeature = function onEachFeature(feature, layer) {

colors = d3.scale.category20()
var div = $('<div id="chart"><h3>Ethnic Group Distribution</h3><svg/><h4>Additional details:</h4>Extra stuff here</div>')[0];

var popup = L.popup({
    minWidth: 500,
    minHeight: 350
}).setContent(div);

layer.bindPopup(popup);

var values = feature.properties;

var data = [{
    name: "Pashtun",
    value: values["Pashtun"]
}, {
    name: "Tajik",
    value: values["Tajik"]
}, {
    name: "Uzbek",
    value: values["Uzbek"]
}, {
    name: "Turkmen",
    value: values["Turkmen"]
}, {
    name: "Hazara",
    value: values["Hazara"]
}, { …

我正在学习mongodb并遵循以下代码的教程:

我的index.js文件:

var MongoClient = require('mongodb').MongoClient;

var url = 'mongodb://u****:p****@ds131687.mlab.com:31687/learning_mongo';

var findDocuments = function(db, callback) {
    var collection = db.collection('tours');

    collection.find().toArray(function(err,docs){
        if (err) throw err;
        console.log(docs);
        callback;
    })

}

MongoClient.connect(url, function(err, db){
    if (err) throw err;
    // console.log("it is working");
    // db.close();
    findDocuments(db, function(){
        db.close();
    });
})

不幸的是,我在终端中收到以下错误:

dosstx:~/workspace $ node index.js
/home/ubuntu/workspace/node_modules/mongodb/lib/mongo_client.js:810
        throw err;
        ^

TypeError: db.collection is not a function
    at findDocuments (/home/ubuntu/workspace/index.js:6:25)
    at /home/ubuntu/workspace/index.js:20:5
    at args.push (/home/ubuntu/workspace/node_modules/mongodb/lib/utils.js:404:72)
    at /home/ubuntu/workspace/node_modules/mongodb/lib/mongo_client.js:255:5
    at connectCallback (/home/ubuntu/workspace/node_modules/mongodb/lib/mongo_client.js:933:5)
    at /home/ubuntu/workspace/node_modules/mongodb/lib/mongo_client.js:807:13
    at _combinedTickCallback (internal/process/next_tick.js:73:7) …

如何让我的联系表单在段落中输出消息而不仅仅是一大块文本？这是用户填写表单时的外观(即使他使用回车制作段落):

我的process.php代码:

<?php

$recipient = "johndoe@aol.com";
$subject = "FORM SUBMISSION";

$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$replyTo = $_POST['email'];
$sender = "From: $replyTo\r\n";
$message = $_POST['message'];
$whyContact = $_POST['whyContact'];

$sender .= "MIME-Version: 1.0\n";
$sender .= "Content-type: text/html; charset=us-ascii\n";

$msgBody = "
<html>
<head>
<title>title here</title>
</head>

<style type='text/css'>

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

</style>

<body>

<table cellpadding='0' cellspacing='0' border='0' style='width:100%;border-bottom:1px solid #eee;font-size:12px;line-height:135%;font-family:'Lucida Grande','Lucida Sans Unicode', Tahoma, sans-serif'>
<tr style='background-color:#F5F5F5'> …

根据Vue Formulate，您可以向其中添加 Bootstrap：

使用提供的类道具，您可以全局或逐个添加自己的样式类集。顺风？没问题。引导程序？你被覆盖了。自己滚？对了，支持了。

好的，那你怎么做？

我这样试过，但没有用：

<FormulateInput
  type="email"
  class="form-control" <------bootstrap class
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="user@university.edu"
/>

我有一个普通的 Nuxt 设置，并在尝试使用 fetch() 挂钩渲染页面时收到以下错误：

错误：

[Vue warn]: Property or method "$fetchState" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <PostDetails>
       <Nuxt>
         <DefaultLayout> at layouts/default.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
warnNonPresent @ vue.runtime.esm.js?2b0e:2015
get @ vue.runtime.esm.js?2b0e:2070
render @ _slug.vue?cd54:5
Vue._render @ vue.runtime.esm.js?2b0e:3548
updateComponent @ vue.runtime.esm.js?2b0e:4055
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073 …